# Perspective Percentage Fill on Valve Component

**URL:** <https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 17, 2024, 10:41pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356 "2024-07-17T22:41:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Britt\_Antley](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/britt_antley/32/65170_2.png) [@Britt\_Antley](https://forum.inductiveautomation.com/u/Britt_Antley)\
**Post date:** [July 17, 2024, 10:41pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/1 "2024-07-17T22:41:13Z")

</div>

I have a Perspective Valve Component, and I'm wanting to color fill it to a percentage much like can be done on a Vessel component. For example, if the Valve is 25% open, 25% of the fill would be the open color while the remaining 75% would be the closed color. Is there a relatively simple way to accomplish this?

---

<div class="post-metadata">

**Author:** ![simeonw](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@simeonw](https://forum.inductiveautomation.com/u/simeonw)\
**Post date:** [July 18, 2024, 9:30pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/2 "2024-07-18T21:30:51Z")

</div>

Given that it is a built-in component, not an SVG, I doubt you will be able to fill just the valve part of the graphic.

Not sure how useful this is to you, but there is another path you can go down using SVGs.

If you copy the SVG of the stock valve  
and combine it into one path, you can do a percentage fill using a linearGradient. I haven't added the text or the stroke back in, but it wouldn't be hard to do.

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

This can be applied to any SVG and you can use bindings on the SVG elements to dynamically manipulate the attributes of each element, as you would any other variable.

I've attached an export of this in case you are interested.

[Valve SVG Fill.zip](https://forum.inductiveautomation.com/uploads/short-url/xknSsTrDEDrSUH0RRkX20xWsXDN.zip) (5.6 KB)

---

<div class="post-metadata">

**Author:** ![Britt\_Antley](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/britt_antley/32/65170_2.png) [@Britt\_Antley](https://forum.inductiveautomation.com/u/Britt_Antley)\
**Post date:** [July 22, 2024, 2:16pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/3 "2024-07-22T14:16:41Z")

</div>

I was afraid that the built-in component would have this limitation, so creating my own SVG looks to be the way to go. Thanks for this!

---

<div class="post-metadata">

**Author:** ![Britt\_Antley](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/britt_antley/32/65170_2.png) [@Britt\_Antley](https://forum.inductiveautomation.com/u/Britt_Antley)\
**Post date:** [July 23, 2024, 4:28pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/4 "2024-07-23T16:28:09Z")

</div>

![ValvePercentageFill](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bcac5fe0332caaac93b803eca752595d97c5c153.png)  
And voila! I was able to get it to work with bindings and added in stroke around the valve. Thanks so much for your help @simeonw !

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [July 24, 2024, 2:36pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/5 "2024-07-24T14:36:31Z")

</div>

I'm surprised @victordcq hasn't responded with his wizardry.

---

<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:** [July 24, 2024, 2:39pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/6 "2024-07-24T14:39:59Z")

</div>

it seems this was solved no?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [July 24, 2024, 2:40pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/7 "2024-07-24T14:40:51Z")

</div>

No with the native symbols, they used their own SVG.

---

<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:** [July 24, 2024, 2:43pm UTC](https://forum.inductiveautomation.com/t/perspective-percentage-fill-on-valve-component/93356/8 "2024-07-24T14:43:28Z")

</div>

well you can easily turn them into svgs

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