Using the css stylesheet manager to animate svg component

[tcrucet]

Could someone help me with applying a CSS style to an svg component? My understanding is that in the new 8.1.22 stylesheet manager you add something along the lines of:

.psc-rotate {
  animation: rotation 2s infinite linear;
}

Then, in the object you want to animate you add a style and classes attribute, and just type in "rotate", although you have to select one of the defined styles first to get the text widget to type something in. If you were using one of the style classes typically defined under styles on an SVG element, such as something with a shape fill, you'd have to delete the locally defined fill on the object to prevent it from overriding the style class. But how does a CSS declaration become a style class? Am I leaving out a bit of definition in the CSS manager? I'm really a beginner and was wondering if this is somewhere on the right track. I haven't had any luck getting it to work so far, at least not with rotate.

[PGriffith]

You need a keyframes declaration as well:

.psc-rotate {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@tcrucet

But how does a CSS declaration become a style class?

The trick is that things actually work in the opposite direction. "Style classes" are an Ignition invention, and ultimately end up on the page as regular CSS selectors and rules (because that's all the browser understands). You can even open these up in your browser's dev tools:

The "psc" prefix is an Ignition convention, because we wanted to separate Ignition's named styles from "true" CSS selectors that we might need to style our own components, and from theming. When you add values to the style.classes property of a Perspective component, that will be emitted as the classname of the actual HTML element (again, browser devtools are incredible):

The .psc-$className rule in the style.css file is, because of the rules of CSS, going to apply to any component with the class name psc-$className.

[jlandwerlen]

You can also use the predefined animation class that @lrose pointed out in this thread.

Animation for Symbol Factory In Perspective

animation is the way to go like @Matthew.gaitan suggested

[tcrucet]

Thanks so much! I forgot to mention the svg element is part of a larger imported drawing; I'm trying to hold everything together in a coordinate container set to % when resizing, instead of drifting apart like Pangea. As such, your solution worked except the element was whipping around origin point 0,0 for the entire drawing instead of spinning in place. I did some changes and found this to work for what I needed:

.psc-rotate {
    transform-box: fill-box;
    transform-origin: center center;
    animation: rotating 2s linear infinite;
}

@keyframes rotating {
  100% { 
    transform: rotate(360deg);
    }
}

Thanks again!

[lrose]

@tcrucet

I'm trying to hold everything together in a coordinate container set to % when resizing, instead of drifting apart like Pangea.

Did you try setting the props.aspectRatio ?

[Transistor]

Tip: format your code using the </> button. That will preserve indents and apply syntax highlighting. There's an edit button below your posts if you want to fix them.

[tcrucet]

Thanks, that helps!