How to create multiple SVG paths in Javascript with a function-CodePudding

I need to create strokes similar in length but of different angles of rotations so instead of having a several redundant lines of codes, I preferred using JavaScript to that as follows;

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 is the value to which the stroke will be rotated when stroke(i) will be called.

I checked a solution from here to fix my code but unfortunately this doesn't woks, any solution to this ?

CodePudding user response：

The problem is you trying to append paths into a document, not in SVG element.

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>

CodePudding user response：

Since a parsed <svg id="draw"> already is in the correct NameSpace;
you can add content with Strings, no need to add those <path> in the SVG NameSpace (again)

As Robert said, a <circle> with stroke-dasharray gives a better result (dashes are not straight),
does not require JavaScript and can easily be changed.

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 fill="none" stroke="red" stroke-width="5" cx="200" cy="200" r="197.5" 
          pathLength="72" stroke-dasharray="1"/>
</svg>