Perspective Percentage Fill on Valve Component

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?

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

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 (5.6 KB)

3 Likes

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!

ValvePercentageFill
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 !

1 Like

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

it seems this was solved no?

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

well you can easily turn them into svgs

1 Like