Change Stroke Paint for Entire SVG Group

How can I easily change the stoke paint color for all paths in an SVG group? For instance, when I use the symbol factory screen, if I want to change the color of the mesh, how would I do so? I can see the element.stroke.color property, but there's got to be a better way than 23 bindings (one for each element).

I'm not familiar with Expression Structure bindings at all, but it seems like it might be handy here.

It can be a bit of a pain working with a large embedded SVG.

Essentially, you can utilise the overall drawings style properties fill and stroke but in order to do that the element stroke paint and fill paint need to be set to empty. If it is a fairly complex SVG with grouped elements then it can be painful.

You can make this task simpler by using the Property Editor search which will expand and highlight all the paint keys found.

I hope that helps.

3 Likes

If you're animating the color for several elements off the same expression I would recommend adding a custom property to the embedded SVG and doing the binding there. Then bind each color binding to that custom property.

It's good to be able to see the color animation without drilling down into the tree and I have seen implementations where the animation color was blinking which would trigger the SVG tree to minimize on the blink interval. This becomes a real hassle to troubleshoot because you can't even drill down to the binding before the whole tree minimizes. That said, I think it's better to do a blink animation with CSS but the point is that a color change will collapse your SVG tree which can be a significant hassle when troubleshooting a binding.