将HTML文件或者SVG代码文件转换成.svg形式的图片

最新推荐文章于 2024-05-06 17:34:22 发布
最新推荐文章于 2024-05-06 17:34:22 发布
阅读量1.8k 收藏
点赞数 1
文章标签： html python 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A13526_/article/details/131234896
版权

论文代码画图(根据自己的论文要求画图)

以下为svg代码,根据自己论文画图,有部分删减

    <svg height="400" width="850" xmlns="http://www.w3.org/2000/svg">
      <style>
        .small {
          font: italic 30px sans-serif;
        }
      </style>
      <text x="45" y="97" class="small">r<tspan dy="5" font-size="15">min</tspan></text>
      <text x="195" y="97" class="small">r<tspan dy="5" font-size="15">1</tspan></text>
      <text x="345" y="97" class="small">r<tspan dy="5" font-size="15">2</tspan></text>
      <text x="495" y="97" class="small">r<tspan dy="5" font-size="15">3</tspan></text>
      <text x="645" y="97" class="small">r<tspan dy="5" font-size="15">4</tspan></text>
      <text x="795" y="97" class="small">r<tspan dy="5" font-size="15">max</tspan></text>

      <text x="242" y="350" class="small">r<tspan dy="5" font-size="15">min</tspan></text>
      <text x="340" y="350" class="small">r<tspan dy="5" font-size="15">1</tspan></text>
      <text x="430" y="350" class="small">r<tspan dy="5" font-size="15">2</tspan></text>
      <text x="525" y="350" class="small">r<tspan dy="5" font-size="15">3</tspan></text>
      <text x="620" y="350" class="small">r<tspan dy="5" font-size="15">4</tspan></text>
      <text x="710" y="350" class="small">r<tspan dy="5" font-size="15">max</tspan></text>

      <line
        x1="50"
        y1="100"
        x2="50"
        y2="130"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
      <line
        x1="50"
        y1="115"
        x2="800"
        y2="115"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
      <line
        x1="800"
        y1="100"
        x2="800"
        y2="130"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />

      <defs>
        <marker
          id="triangle"
          markerUnits="strokeWidth"
          markerWidth="5"
          markerHeight="4"
          refX="0"
          refY="2"
          orient="auto"
        >
          <path d="M 0 0 L 5 2 L 0 4 z" />
        </marker>
      </defs>
      <path
        d="M 50,135 L 235,305"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />

      <defs>
        <marker
          id="triangle"
          markerUnits="strokeWidth"
          markerWidth="5"
          markerHeight="4"
          refX="0"
          refY="2"
          orient="auto"
        >
          <path d="M 0 0 L 5 2 L 0 4 z" />
        </marker>
      </defs>
      <path
        d="M 800,135 L 731,302"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M200 135 330 285"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M350 135 430 284"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M500 135 528 282"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M650 135 628 282"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />

      <g fill="none" stroke="black" stroke-width="4">
        <path stroke-dasharray="5,5" d="M200 100 200 130" />
        <path stroke-dasharray="5,5" d="M500 100 500 130" />
        <path stroke-dasharray="5,5" d="M650 100 650 130" />

        <path stroke-dasharray="5,5" d="M344 300 344 330" />
        <path stroke-dasharray="5,5" d="M626 300 626 330" />
      </g>

      <line
        x1="250"
        y1="300"
        x2="250"
        y2="330"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
      <line
        x1="720"
        y1="300"
        x2="720"
        y2="330"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
    </svg>

转换为svg图片; 供给在浏览器可另存为图片形式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var svgCode = `<svg height="400" width="850" xmlns="http://www.w3.org/2000/svg">
      <style>
        .small {
          font: italic 30px sans-serif;
        }
      </style>
      <text x="45" y="97" class="small">r<tspan dy="5" font-size="15">min</tspan></text>
      <text x="195" y="97" class="small">r<tspan dy="5" font-size="15">1</tspan></text>
      <text x="345" y="97" class="small">r<tspan dy="5" font-size="15">2</tspan></text>
      <text x="495" y="97" class="small">r<tspan dy="5" font-size="15">3</tspan></text>
      <text x="645" y="97" class="small">r<tspan dy="5" font-size="15">4</tspan></text>
      <text x="795" y="97" class="small">r<tspan dy="5" font-size="15">max</tspan></text>

      <text x="242" y="350" class="small">r<tspan dy="5" font-size="15">min</tspan></text>
      <text x="340" y="350" class="small">r<tspan dy="5" font-size="15">1</tspan></text>
      <text x="430" y="350" class="small">r<tspan dy="5" font-size="15">2</tspan></text>
      <text x="525" y="350" class="small">r<tspan dy="5" font-size="15">3</tspan></text>
      <text x="620" y="350" class="small">r<tspan dy="5" font-size="15">4</tspan></text>
      <text x="710" y="350" class="small">r<tspan dy="5" font-size="15">max</tspan></text>

      <line
        x1="50"
        y1="100"
        x2="50"
        y2="130"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
      <line
        x1="50"
        y1="115"
        x2="800"
        y2="115"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
      <line
        x1="800"
        y1="100"
        x2="800"
        y2="130"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />

      <defs>
        <marker
          id="triangle"
          markerUnits="strokeWidth"
          markerWidth="5"
          markerHeight="4"
          refX="0"
          refY="2"
          orient="auto"
        >
          <path d="M 0 0 L 5 2 L 0 4 z" />
        </marker>
      </defs>
      <path
        d="M 50,135 L 235,305"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />

      <defs>
        <marker
          id="triangle"
          markerUnits="strokeWidth"
          markerWidth="5"
          markerHeight="4"
          refX="0"
          refY="2"
          orient="auto"
        >
          <path d="M 0 0 L 5 2 L 0 4 z" />
        </marker>
      </defs>
      <path
        d="M 800,135 L 731,302"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M200 135 330 285"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M350 135 430 284"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)"
      />
      <path
        stroke-dasharray="10,5"
        d="M500 135 528 282"
        stroke="black"
        stroke-width="3"
        fill="none"
        style="marker-end: url(#triangle)
      </g>
      <line
        x1="250"
        y1="315"
        x2="720"
        y2="315"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
      <line
        x1="720"
        y1="300"
        x2="720"
        y2="330"
        style="stroke: rgb(0, 0, 0); stroke-width: 3"
      />
    </svg>`;
      var blob = new Blob([svgCode], { type: "image/svg+xml" });
      var url = URL.createObjectURL(blob);

      var img = new Image();
      img.src = url;

      document.body.appendChild(img);
    </script>
  </body>
</html>

套路

var svgCode = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect x='50' y='50' width='100' height='100' fill='red' /></svg>";

var blob = new Blob([svgCode], { type: 'image/svg+xml' });
var url = URL.createObjectURL(blob);

var img = new Image();
img.src = url;

document.body.appendChild(img);

在浏览器中可以另存为

在这里插入图片描述

来杯黑美式
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
这篇文章能让你吃透SVG
pythonxiaopeng的博客
11-11 492
VG转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。 一、转换简单示例 例： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" tr
jquery-svg-convert：使用jQuery快速将.svg图像转换为代码
02-03
2. **转换SVG为JavaScript对象**：通过调用插件的方法，可以将SVG图像转换为JavaScript对象，这个对象包含了SVG的所有图形元素和属性。 3. **操作SVG元素**：得到SVG对象后，你可以利用jQuery的API进行各种操作，...
vector 转 svg 方法
u012514113的专栏
07-26 2511
Android vector 与 svg 图片格式互转换
SVG代码如何转为SVG文件
热门推荐
都说了要微辣
04-19 2万+
今天要做一张关于OPPO手机的海报，其中有一个地方需要OPPO的logo，于是想找一张高分辨率的OPPO logo的PNG图片，并且是最新版的oppo logo，发现网上都没有，于是根据以前敲代码的经验，想使用Photoshop开SVG文件，转换分辨率的经验来做，然而发现oppo官网上的logo是svg文件，并且是以svg代码的形式加载的，不行大部分站点是以加载一个svg文件来实现的，没办法，只...
如何把svg转化为图片格式？三个不得不学的好方法
最新发布
keji_fenxiang的博客
05-06 2097
不同的图片格式有不同的特点和用途，例如JPEG格式适合用于网页和电子邮件中的图片，因为它具有较高的压缩率和较小的文件大小；如果我们能够将一些不需要保留原始格式的图片转换为较小的格式，就可以有效地节省存储空间，从而为其他重要的文件腾出更多的空间。步骤3：在软件底部选择我们需要的图片格式，这里有jpg，png，bmp等多种图片格式供我们选择，我们可以根据自身需要进行选择。步骤2：点击左上角的“添加文件”按钮，把需要转换的svg图片添加到软件中，这里支持批量添加，不限制数量。
avascript 导出div为图片PNG，div转svg,svg转canvas
面朝大海，春暖花开
09-08 345
<!DOCTYPE html> <html><body> <h2>Input Div:</h2> <div id="div"> <p>Just have a <span style='color:white; text-shadow:0 0 2px blue;'>TRY</span></p><p><b>By Dion</b></p>.
将svg图片代码转换成base64
m0_52441527的博客
10-19 1147
【代码】将svg图片代码转换成base64。
svg html转换器,SVG基础 | SVG坐标系统和图形转换
weixin_42412939的博客
05-31 514
SVG坐标系统坐标系统一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值。如下图所示：而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上。如下图所示：SVG坐标系统的单位你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定...
html修改svg的颜色，使用到的js脚本
04-12
SVG（Scalable Vector Graphics）是一种用于创建图形的矢量格式，它允许我们以代码的形式描绘图形，这意味着我们可以利用JavaScript来动态地改变这些图形的属性，如颜色。在给定的场景中，我们有两个JavaScript文件...
react-SVGtoJSXGUI将SVG转换为有效的ReactSVG
08-14
在React中，SVG可以作为普通HTML元素处理，但通常推荐将其转换为JSX组件形式，以便更好地进行组件化管理和复用。这有助于保持代码的整洁和模块化。 2. **SVG转换为JSX**： `react-SVGtoJSXGUI`的核心功能就是这个...
kabeja0.4将CAD格式文件转换，内附demo
05-31
它可以将DXF文件转换为多种其他常用格式，包括： 1. **PDF**（Portable Document Format）：一种通用的文档格式，能够保持原始文件的布局和图像质量，便于分享和打印。 2. **JPEG**和**PNG**：这两种都是常见的图像...
格式化html文本转svg文本源代码
07-28
格式化的HTML文本转换成SVG文本源代码。利用contenteditable属性，div标签里的文本将可以编辑。借助execCommand，div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能，生成跟HTML所见一模一样的SVG文本。
SvgToPng.java
04-04
svg转png图片格式代码类，svg转png图片格式代码类，svg转png图片格式代码类
html2canvas(兼容截图svg元素)
08-22
html2canvas可以截图指定dom元素，但是dom元素中如果含有svg会导致截图不完整，例如使用jsPlumb流程图，其中连线无法截图，所以结合了canvg可以完整截图
js-html-to-pdf:在浏览器（或在 phonegap 应用程序中）将 html（带 svg）转换为 pdf
06-05
"js-html-to-pdf"是一个JavaScript库，专为在浏览器环境中，包括PhoneGap应用程序中，将HTML内容（包含SVG元素）转换成PDF文件。这使得开发者能够方便地将网页或用户界面的内容导出为PDF格式，以便于打印、存储或...
svg图片库和svg代码生成
weixin_34255055的博客
10-19 896
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML 中添加视频
qq_34870529的博客
11-21 1351
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
【脚本工具】SVG路径中的A指令转DXF的圆弧和椭圆弧 & C++代码实现
知不足而奋进，望远山而前行
05-27 1860
分别代入椭圆的参数方程，反推出椭圆弧的起始和终止角度。分别代入圆的参数方程，反推出圆弧的起始和终止角度。圆弧可以看作一个长半轴等于短半轴（即满足。）的特殊椭圆弧，因此，下面统一用长半轴。根据椭圆的参数方程，可以通过代入点。根据圆的参数方程，可以通过代入点。基于此，我们可以通过将圆弧的起点。基于此，我们可以通过将圆弧的起点。，从而反推出该点的角度。，从而反推出该点的角度。
通过SVG文件制图
相逢一笑
10-24 1579
1. SVG 介绍 以下信息摘自 维基百科 可缩放矢量图形（英语：Scalable Vector Graphics，缩写：SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。 SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象（包括PNG、JPEG这些栅格图像）能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML名字空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、
Qt 将.ai文件转换为svg格式
06-08
Qt 本身并不支持将 Adobe Illustrator (.ai) 文件转换为 SVG 格式，但可以使用第三方工具或库来进行转换。以下是一些可能的解决方案： 1. 使用 Adobe Illustrator 软件将 .ai 文件导出为 SVG 格式。在 Illustrator 中，你可以使用 "文件 -> 导出" 命令，然后选择 SVG 格式并设置导出选项。这是最简单的方法，但需要安装 Adobe Illustrator 软件。 2. 使用 Inkscape 这样的开源矢量图形编辑器将 .ai 文件转换为 SVG 格式。Inkscape 支持导入 .ai 文件，并可以将其转换为 SVG 格式。你可以通过 Inkscape 的界面或命令行工具来执行此操作。例如，你可以使用以下命令将 .ai 文件转换为 SVG 文件： ``` inkscape -f input.ai -l output.svg ``` 3. 使用其他第三方工具或库进行转换。例如，你可以使用 Ghostscript 软件来将 .ai 文件转换为 SVG 格式。以下是一个示例命令： ``` gs -dNOPAUSE -dBATCH -sDEVICE=svg -sOutputFile=output.svg input.ai ``` 请注意，这些解决方案都有其优点和局限性，具体取决于你的需求和场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值