如何在Javascript中使用函数创建多个SVG路径

Question

我需要创建长度相似但旋转角度不同的笔画，所以不是有几行多余的代码，我更喜欢使用JavaScript，如下所示;

function stroke(rot) {
var dash=document.createElementNS("http://www.w3.org/2000/svg", "path");
dash.setAttributeNS(null,"id","dash");
dash.setAttributeNS(null,"d","M 180 0 L 200 0");
dash.setAttributeNS(null,"transform","rotate(+"+rot+" 200 200)");
dash.setAttributeNS(null,"fill","none");
dash.setAttributeNS(null, "stroke","black");
dash.setAttributeNS(null, "stroke-width","5");
document.appendChild(dash);
}
for(i=0;i<360;i+=10) stroke(i);

i是当stroke(i)被调用时，该stroke将被旋转到的值。

我检查了一个解决方案，从这里修复我的代码，但是不幸的是，这不起作用，有解决方案吗?

Answer 1

问题是您试图将路径附加到文档中，而不是在SVG元素中。

const svgTarget = document.getElementById("draw");
function stroke(rot) {
let dash = document.createElementNS("http://www.w3.org/2000/svg", "path");
dash.setAttributeNS(null, "id", "dash");
dash.setAttributeNS(null, "d", "M 180 5 L 200 5");
dash.setAttributeNS(null, "transform", "rotate(+" + rot + " 200 200)");
dash.setAttributeNS(null, "fill", "none");
dash.setAttributeNS(null, "stroke", "black");
dash.setAttributeNS(null, "stroke-width", "5");
svgTarget.appendChild(dash);
}
for (i = 0; i < 360; i += 10) stroke(i);

<svg id="draw" viewBox="0 0 400 400" width="200px" height="200px"></svg>

Answer 2

既然已解析的<svg id="draw">已经在正确的命名空间;
你可以添加内容与字符串，不需要添加那些<path>在SVG命名空间(再次)

正如Robert所说，<circle>与stroke-dasharray给出了更好的结果(绘制的路径是直的)，
不需要JavaScript，可以很容易地改变。

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength
• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

for (i = 0; i < 360; i += 10) {
document.getElementById("draw")
.innerHTML += `<path d="M180 5L200 5" 
transform="rotate(${i} 200 200)"
fill="none" stroke="black" stroke-width="5"/>`;
}

<svg id="draw" viewBox="0 0 400 400" height="180px"></svg>
<svg id="circle" viewBox="0 0 400 400" height="180px">
<circle stroke-width="5" r="197.5" fill="none" stroke="red" cx="200" cy="200" 
pathLength="72" stroke-dasharray="1"/>
</svg>