# CSS - Advance style sheet referencing SVG elements

**URL:** <https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 13, 2024, 5:50am UTC](https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770 "2024-04-13T05:50:51Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [April 14, 2024, 2:24am UTC](https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770/2 "2024-04-14T02:24:06Z")

</div>

This should show you one way to do it, although doing it on mouse click may be difficult. I would recommend you place the animation in a unique style, and use the clicks event to apply the style dynamically.

> [@Animated SVG dynamically](https://forum.inductiveautomation.com/t/animated-svg-dynamically/86984/6):
>
> Agree with @PGriffith Here is a spinner animation. Stylesheet CSS looks like: @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .psc-spinner { animation: spin 1s linear infinite; } Looks like: [spinner] Looks a lot better in the browser, the GIF kind of messes with the appearance of the animation. Here is the view: { "custom": {}, "params": {}, "props": { "defaultSize": { "height": 422, "widt…

---

_[View the full topic](https://forum.inductiveautomation.com/t/css-advance-style-sheet-referencing-svg-elements/88770)._