Can someone please help me with applying simple animations to an SVG using style classes animation. When you flatten the SVG to group everything as one, there is no longer any style options under the elements. I’m sure there must be an easy way to do this but I’m just missing something. For example, apply the blinking animation that’s demonstrated here
You just need to add the style prop [type: object] into the element that you want styled and add a classes key to it. Make sure you “embed” the SVG; don’t add it to the image library and use it from there as you will be left with the SVGs lifeless corpse I’m not sure why that’s the default option tbh - I would rather it be removed altogether
That did the worked, my default was to embed the SVG. Also I deleted the fill and stroke property of the element, i think that also conflicts with the style.
Correct, any style defined on the component via a component style property (e.g. style.color, stroke.fill, etc.) will override anything in a style class applied.
As you probably know, both the stroke and fill style objects within an SVG's elements can be created as keys in the style object as well. The higher the specificity should win though, so I believe the stroke.fill would override the style.stroke
I’m not sure why that’s the default option tbh - I would rather it be removed altogether