Using CSS class to animate individual elements from the drawing object

Ignition
1

I am trying to style individual elements in my pump drawing and when I add the style to the object itself it applies to all elements but when I add the style to on specific element it does not work. Below is my current style class and animations:

@keyframes psc-pmpALM-anim {
0%  { fill: #FF000055; }
100% { fill: #FF000088; }
0%  { stroke: #000000; }
100% { stroke: #FF0000; }
}

.psc-pmpALM path {
animation-name: psc-pmpALM-anim;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;

}
.psc-pmpAcked path {
stroke: #FF0000 !important;
fill: #FFBEBE !important;
}
.psc-pmpW path {
fill: #FFFFFF !important;
}
.psc-pmpG path {
fill: #B0B0B0 !important;
}
2

You need to apply the style to the SVG element itself. You'll probably need to add the styles.classes prop manually

3

I had already done that, however when I call the style nothing seems to happen. I no longer need this feature in my application, however it would still be something good to know.

4

Sometimes the fill paint on an element will interfere with style bindings. I usually apply the style and look at it. If the style isn’t showing up I delete the fill paint nodes and see if it’s visible. Sometimes I set the fill paint to transparent. When you delete the fill paint node it usually makes the element totally black. Sometimes I have to set that to transparent and sometimes my style fixes it.

It’s one of those things that can be a little weird as it behaves differently on different drawings. I haven’t dug into it enough to figure out exactly what’s going on because it’s usually quicker for me to just try a few things and see what is working on a specific drawing.

5

That doesn’t seem to be working as well, it is doing the ‘all black’ behavior that you mentioned.

6

did you add a style element to that element?

Edit:

Sometimes when you get the black fill you have to leave the paint element and make it fill with “transparent”

7

It could be the path selector in the rule, try it without that.