Replace svg style with attributes.

[Oreilles]

Is there any reason why you choose to set SVG props with inline styling: path.style.stroke = 'none' instead of attributes, with path.setAttribute('stroke', 'none') ?

Using SVG attributes instead of inline styling would make it possible to style svgs with css in the context of a web page, it currently isn't because inline style attributes win over css stylesheets.

#155

[pshihn]

CSS Properties may be the way to go in your case. Set the stroke/fill to var(--my-color)
Then on your parent node just set the prop to whatever color you want

svg {
  --my-color: red;
}

svg.nostroke {
   --my-color: none;
}

[Oreilles]

Sure, but then it's not possible to use css animation. This doesn't work:

svg {
  animation: animate_fill 3s infinite;
}
@keyframes animate_fill {
    from { --fill: red } to { --fill: blue }
}

But this does :

@keyframes animate_fill {
    from { fill: red } to { fill: blue }
}

Changing to attributes would be a tiny change in the code base, and I highly doubt it would break anyone's markup. Another reason for the switch would be markup readability and ease of manipulation.

[pshihn]

Fair enough. Let me ensure it won't have any other consequences.

Btw, if you want your own SVG DOM creation, generators provide a way. https://github.com/pshihn/rough/wiki/RoughGenerator#svg-path-info

You can generate a rough shape and then use the pathinfo to get all the information you need for rendering SVG DOM

[pshihn]

Closed by #155