# Symbol Factory animated symbol color change

**URL:** <https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [October 8, 2021, 2:14pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753 "2021-10-08T14:14:49Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [October 8, 2021, 2:14pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/1 "2021-10-08T14:14:49Z")

</div>

Hello, we are using the “centrifugal pump” symbol inside the Perspective symbols component:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/13b6fa2777d37a145d26fbf139d440eeb5e51013.png)

in particular we use it because it has an animated fan which spins around when the pump is working.  
We now need however to change the color of the pump from white to grey based on whether the pump is enabled or not:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f390cb8407eb4c2842f93845324121abe07f8fa5.png)

as we change the color however the blade color of the fan inside the pump and the void between blades is changed with the specified color such that the fan doesn’t seem to be spinning anymore.  
Can this problem be fixed by ia? can we import own animated objects into the designer?

Thank you

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [October 8, 2021, 9:01pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/2 "2021-10-08T21:01:36Z")

</div>

You can import vectors from programs like inkscape.

check out [https://inductiveuniversity.com/courses/vision-components-and-property-bindings/8.1](https://inductiveuniversity.com/courses/vision-components-and-property-bindings/8.1)

it goes through importing, color changing, animating, tinting etc…

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 8, 2021, 9:18pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/3 "2021-10-08T21:18:11Z")

</div>

> [@andrews](#):
>
> tinting

I would stay away from tinting; it's dodgy! Stick with embedding the SVG as opposed to adding it to the image library where it becomes a mess

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [October 8, 2021, 9:22pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/4 "2021-10-08T21:22:22Z")

</div>

I don’t disagree, but regardless the video is there and he can check it out.

---

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [October 11, 2021, 8:26am UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/5 "2021-10-11T08:26:56Z")

</div>

Sorry I updated the question to reflect the fact I’m using perspective and not vision and the fact I use the **Symbols component** which is inside the right “Perspective Components” menu and not the “Tools” → “Symbol Factory” one (I had some confusion on the difference between the two).  
I also tried importing an animated example svg as an icon but the icon becomes static as soon as I open in the designer ☹

```auto
<svg width="150" height="150" viewBox="0 0 200 200">
    <g transform="translate(100 100)">
      <path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path>
      <animateTransform 
          attributeName="transform" 
          type="scale" 
          values="1; 1.5; 1.25; 1.5; 1.5; 1;" 
          dur="1s" 
          repeatCount="indefinite"
          additive="sum">      
      </animateTransform>
  </g>
</svg>

```

it seems the **animateTransform** property is not supported by Ignition.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 11, 2021, 9:51am UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/6 "2021-10-11T09:51:32Z")

</div>

you can put css transform animations on svgs. it will be a bit tricky to make this work tho.  
infact the animaton on the pump is already css based.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/4/44ff1eac311711e6715519c79995c3a371d49adf.png)  
this is the best you can get with the pump from igntion. for some reason the blades are not blades but just lines, so you cant fill them… i guess you could increase the stroke-width a bit of the fans so then there are 8 smaller fans

`.pump_centrifugal_rotor>g>path:nth-child(1){fill:white;} .ia_symbolComponent-pump-centrifugal{fill:grey;}`

---

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [October 11, 2021, 11:18am UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/7 "2021-10-11T11:18:45Z")

</div>

> [@victordcq](#):
>
> you can put css transform animations on svgs. it will be a bit tricky to make this work tho.  
> infact the animaton on the pump is already css based.

can you please tell me where to look for the css based animation

> [@victordcq](#):
>
> i guess you could increase the stroke-width a bit of the fans so then there are 8 smaller fans
> 
> `.pump_centrifugal_rotor>g>path:nth-child(1){fill:white;} .ia_symbolComponent-pump-centrifugal{fill:grey;}`

and where to put this style?  
At the moment the most I could do is use an iframe to view an animated svg put inside the "C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main" directory.

![gif_animata](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6c3be5317ed6101931fefe05c8771220099ccda.gif)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 11, 2021, 11:28am UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/8 "2021-10-11T11:28:43Z")

</div>

> [@r.p](#):
>
> can you please tell me where to look for the css based animation

They are in the css files. probably located here` C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\palette\symbols.css`  
Tho if you want to make one yourself you should look here:

> **[CSS Animations](https://www.w3schools.com/css/css3_animations.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

> **[CSS 2D Transforms](https://www.w3schools.com/css/css3_2dtransforms.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

> **[CSS Transitions](https://www.w3schools.com/css/css3_transitions.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

> [@r.p](#):
>
> and where to put this style?

The correct way is to create a new theme that inhertis the other theme and write this here.  
Tho you can also inject the css in a style class in the background-image by putting }{ around it: (no need to asign the styleclass to anything)  
`}.pump_centrifugal_rotor>g>path:nth-child(1){fill:white;} .ia_symbolComponent-pump-centrifugal{fill:grey;}{`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea4c00c64e80c6b4121ae86eb27d5d77b9f8fdf7.png)

---

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [October 11, 2021, 11:45am UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/9 "2021-10-11T11:45:50Z")

</div>

I applied the style as shown but the pump doesn’t change:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/764564493de4632f9b9ff4adc65867969c83783b.png)

also I don’t understand where you got the class .pump\_centrifugal\_rotor from, my symbols.css has no notion of this class, it contains:

```auto

/** Misc */
.ia_symbolComponent__liquid {
    fill: var(--info);
    fill-opacity: 0.7;
    stroke-width: 2px;
}

.ia_symbolComponent__liquid--warning {
    fill: var(--error);
}

/** Animations */
@keyframes ia_symbolComponent__animate--alternateFill {
    0% {
      fill: var(--symbolFill--default);
    }
    50% {
      fill: var(--symbolFillAnimation--default);
    }
    100% {
      fill: var(--symbolFill--default);
    }
}

[etc..] [etc..]

```

so I’m struggling with trying figuring out how you manipulate the css of these objects.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 11, 2021, 11:50am UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/10 "2021-10-11T11:50:09Z")

</div>

> [@r.p](#):
>
> pump doesn’t change:

What do you mean on your screenshot i do see the pump being grey xd.  
Ah you want it to be dynamic based on the class.. hmh ups then you will need to do add the classname infront of .ia\_symbolComponent-pump-centrifugal...  
like so `.psc-NewStyle .ia_symbolComponent-pump-centrifugal{...}` (psc- is auto added by igntion so is also needed)

Yes it could be located in a different file. i didnt check the files to make this, but used the google chrome debugger to look at the dom elements xd.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/4/a466526cf73dd1b10c4f6809479766a8f0b45ecc.png)

you should not manipulate the base theme.css files tho as these willbe overwritten again after an upgrade of igition. you have to make a new one so that doesnt happen.

---

<div class="post-metadata">

**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\
**Post date:** [October 11, 2021, 12:26pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/11 "2021-10-11T12:26:58Z")

</div>

thank you I think I got the hang of it, one last thing however: does your pump still spin after inserting the css?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 11, 2021, 12:29pm UTC](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/12 "2021-10-11T12:29:33Z")

</div>

yes if you dont overwrite the animations/transforms and these will still be applied as normal. In this case only the fill gets changed