SVG Background animations not working after upgrading to 8.3

Ignition
1

I have a simple SVG that I need the background to blink. Prior to upgrading to 8 this animation worked. Now the background changes to black. Behavior is the same on version 8.1 and 8.3.

Even stranger, after upgrading to 8.x it worked until I made a change to the style.

As I mess with the style it will get to the point where Designer won’t bring up the style editor when I click on the style. I have to exit Designer and restart.

Here are the details.

image
image848×563 34.7 KB

image
image1004×745 37.2 KB

SVG:

image
image361×520 18.9 KB

View:

image
image219×115 3.63 KB

Style Assignment:

image
image368×255 11.2 KB

Screen shot of the view:

image
image270×188 1.4 KB

Note that the background of the label animates correctly.

I get the same result if the style is assigned directly to the SVG.

Remember that this works pre version 8 and even works in version 8 until the style is changed.

2

I find that hard to believe, mainly because Perspective didn’t exist before version 8… :grinning_face: (typo?)

Also, SVGs use shape fill to set their fill colour. Changing background-color will change the background behind the SVG, unless that’s what you’re trying to do?

More importantly though, SVG elements without a fill defined will be set to black by default.

3

Yes, was a typo.

4

Short mp4 showing it working before the style was touched.

5

I would be looking to see if any css was adding anything to that style class, like adding fill into the animation which has issues in the new version. In any case though, I'm still sure it’s because you’re setting background colour and not fill

6

Another bit of information. I can use the style to set the background color if the style is not animated.

7

Try adding fill.paint = transparent to the root of the svg's props.elements[0]

Eg

props.elements[0].fill.paint = transparent

(sorry I'm not at my laptop)

8

Thank you. I changed the style to animate the fill instead of the background color.

1 Like
9

I’ve seen this happen. The way I solved it was to remove the paint elements from the embedded SVG (the nodes that represent the SVG). Setting it to transparent also works obviously considering it did work for you.

10

If you look at the SVG elements in the screenshot, there's no fill paint defined, only a stroke paint, which is why the fill defaults to black as per the SVG standard. It’s a bit strange it doesn’t default to transparent… :person_shrugging: