自动绘制 svg 符号

Posted 2023-02-16

【中文标题】自动绘制 svg 符号

【英文标题】：draw a svg sign automatically

【发布时间】：2022-01-15 17:27:44

【问题描述】：

我有一个 svg 文件，它是一个标志，我想像一个人用手烧这个标志一样绘制那个标志，以便在 html 页面中显示并重复绘制多次。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 929.000000 683.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,683.000000) scale(0.100000,-0.100000)"
fill="#600178" stroke="none">
<path d="M5645 6816 c-35 -15 -54 -51 -62 -117 -5 -40 -3 -48 18 -63 28 -20
69 -21 112 -3 45 19 58 38 64 99 4 44 2 56 -13 69 -27 23 -84 31 -119 15z">
</path>

<path d="M4845 6504 c-44 -36 -123 -107 -175 -158 -52 -51 -140 -131 -195
-179 -170 -147 -535 -514 -711 -717 -31 -36 -81 -101 -111 -145 -30 -44 -73
-103 -96 -132 -23 -28 -98 -122 -166 -207 -68 -85 -131 -158 -139 -161 -7 -3
and more path drawing code ....
66 20 125 38 130 40 20 7 55 5 55 -3z">
</path>
</g>
</svg>

完整的 svg 文件： https://svgshare.com/i/cht.svg

感谢您的帮助，对不起我的英语。

【问题讨论】：

仅当您将概述的 SVG 路径转换为单个路径时：***.com/questions/65975967/…

感谢@danny-365csi-engelman 抽出宝贵时间并回答我转换为一条路径并尝试这样做，但正如我在下面所说的那样回答其使路径孔闪烁而不是一步一步地画出和平。 ------- 第一条路径不是必需的，只需要第二条路径。

有一种方法可以做到这一点，但它真的很复杂，因为你有相交的线，你的形状是一个填充的路径。我建议在 Canvas 中执行此操作 - 这将是一个更好的选择。

【参考方案1】：

当用户点击打印或提交时，您可以将 svg 插入 DOM，就像在 anwser 中一样。

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg",'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

【讨论】：

感谢您的宝贵时间；但是这段代码像眨眼动画一样和平地绘制了孔 svg，我想像人道的标志一样绘制。