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