# V8.1 perspective symbol (Feature-384)

**URL:** <https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [September 15, 2020, 6:26pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705 "2020-09-15T18:26:35Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [September 15, 2020, 6:26pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/1 "2020-09-15T18:26:36Z")

</div>

Hi,  
Just finish the viewing of the icc keynote and was pretty excite about the perspective symbol feautre.  
But is there a way to change the color state of it ?

Regards

Arnaud

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 15, 2020, 6:30pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/2 "2020-09-15T18:30:08Z")

</div>

The symbols respect theme files, so you can supply changes within your theme files to apply to all symbols. If you only want to modify a single symbol (or provide a Style class to apply to multiple symbols), then you should look into using the `stroke` and `fill` properties. Note that using Style classes or inline properties will override settings within the theme file, so you’ll lose the ability to clearly see the difference between running/faulted/stopped/default.

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [September 15, 2020, 7:00pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/3 "2020-09-15T19:00:34Z")

</div>

Ok that explain a lot of the working behind those symbols.  
But i think it's still work to do to be fully functional and usable by an end user.  
A better way to define some extra state (Hand/interlocked) and change the color or animation of it would be nice.  
But still a create debut

Regards

Arnaud

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [September 15, 2020, 8:05pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/4 "2020-09-15T20:05:53Z")

</div>

You could do that pretty easily just by leaving the Symbol `state` as “default”, then creating a Style Class with the desired appearance. Then, instead of changing the `state` of the symbol, you would just bind the `props.style.class` to whatever Style Class you want applied for your custom state.

---

<div class="post-metadata">

**Author:** ![jramirez3](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@jramirez3](https://forum.inductiveautomation.com/u/jramirez3)\
**Post date:** [January 25, 2021, 10:03pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/5 "2021-01-25T22:03:51Z")

</div>

The only problem with that is it changes the color of the entire component and not just the valve.

![Valve](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f65dcd24fdb1c514af027073c0a0a4709736414.jpeg)

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [January 28, 2021, 4:15pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/6 "2021-01-28T16:15:04Z")

</div>

are you sure you are using the fill property and not the background ?  
See below

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

---

<div class="post-metadata">

**Author:** ![jramirez3](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@jramirez3](https://forum.inductiveautomation.com/u/jramirez3)\
**Post date:** [January 28, 2021, 4:29pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/7 "2021-01-28T16:29:24Z")

</div>

AWESOME. Thank you very much

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [January 28, 2021, 9:30pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/8 "2021-01-28T21:30:09Z")

</div>

Hi! I’m pleased to inform you that we have a feature in the backlog to allow users to define their own states through the Designer UI. When that feature is implemented you’ll be able to define custom states with the following properties. Feel free to use the fill/stroke style props until then. It will work with Symbols in the “default” state

1. Primary Fill Color
2. Alternate Fill Color
3. Stroke Color
4. Animated (yes/no)

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [January 28, 2021, 10:05pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/9 "2021-01-28T22:05:47Z")

</div>

Good to know, it could be game changing for the perspective symbol.

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [August 6, 2021, 10:11pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/10 "2021-08-06T22:11:00Z")

</div>

hi @mperkins,

Do you have any update on this feature ?

regards

---

<div class="post-metadata">

**Author:** ![mperkins](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mperkins/32/71722_2.png) [@mperkins](https://forum.inductiveautomation.com/u/mperkins)\
**Post date:** [August 9, 2021, 8:27pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/11 "2021-08-09T20:27:59Z")

</div>

I’m sorry I don’t. I know it can be frustrating when features sit in our backlog. We’ve been focusing on UI polish and performance, with a few features in the near term (Perspective Piping is close). Unfortunately this feature is not in active development, and I don’t have an ETA when it will be.

---

<div class="post-metadata">

**Author:** ![Sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@Sara](https://forum.inductiveautomation.com/u/Sara)\
**Post date:** [December 15, 2021, 1:28pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/12 "2021-12-15T13:28:40Z")

</div>

I have just downloded last version (8.1.12), the perspective symbol property doesn’t work. I tried to change props.style.fill but the fill in color didn’t change (i attached jpg file). It is the same with Motor or Pump symbol

 ![PerspectivePump](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/07c9009af19713eca8aa0dd9ec4d9f7be0f15509.jpeg)

---

<div class="post-metadata">

**Author:** ![Arnaud\_Declerck](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arnaud_declerck/32/44872_2.png) [@Arnaud\_Declerck](https://forum.inductiveautomation.com/u/Arnaud_Declerck)\
**Post date:** [December 15, 2021, 1:41pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/13 "2021-12-15T13:41:31Z")

</div>

Hi @Sara,

you cannot change the fill color if the state property is not on default.  
All other value on state property will use the color scheme set in the css file on board of ignition gateway.

---

<div class="post-metadata">

**Author:** ![Sara](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@Sara](https://forum.inductiveautomation.com/u/Sara)\
**Post date:** [December 15, 2021, 1:48pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/14 "2021-12-15T13:48:24Z")

</div>

So I cannot have the animation (while running) and also the fill in color?

---

<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:** [December 15, 2021, 2:02pm UTC](https://forum.inductiveautomation.com/t/v8-1-perspective-symbol-feature-384/38705/15 "2021-12-15T14:02:51Z")

</div>

Ive had to answer this somewhere else a while ago,  
Its a bit more complicated ... idk if there is an easier way by now  
Check here:

> [@Symbol Factory animated symbol color change](https://forum.inductiveautomation.com/t/symbol-factory-animated-symbol-color-change/51753/6):
>
> 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] 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;}
