v8.0.15
Is there an equivalent Level Indicator component from Vision for Perspective?
I want to fill this tank symbol below, just to the top of the rectangular part before the top slanted section (or maybe to the top if it’s not difficult).
It should be possible with SVG. If you import a rect, you should be able to bind the position and size to custom properties with formulas.
If you want to use a custom shape, you’ll probably have to calculate the path dynamically, which would require you to know how paths work (see the tutorial on MDN as example: Paths - SVG: Scalable Vector Graphics | MDN)
EDIT: to write it out completely
- Create an SVG (just a text file with the *.svg suffix) with the following contents. This SVG has a 100x100 viewbox, and defines a 60x100 rect in it.
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100">
<rect
y="40"
x="0"
height="60"
width="100"
id="fillRect" />
</svg>
- Import the SVG (drag the file into the designer) as “Embedded image”
- Drill down into the SVG properties, and bind the y attribute to “100 - fill percentage”, and the height to “fill percentage”
- You can alter the “PreserveAspectRatio”, or alter the width directly to get it to match your drawing
When creating such an SVG, it’s probably good to start with a drawing program (like inkscape or illustrator), and clean up the resulting SVG (a drawing program will ofen introduce unneccesary features like layers, namespaces, …).
Ultimately, you can also bundle the outline and the fill in one SVG object.
3 Likes
Thanks Sander, I only just jumped back onto this but yep this works cheers.
You could take it one step further…
If you create an svg drawing and clip one of the filled objects you can do something like this
I created an svg file in inkscape by drawing a shape and duplicating it. One shape is gradient filled and the other shape just has stroke defined (no fill) as the outline. Then added a text object too.
In perspective designer, afer dropping the svg onto a view (embedded), I added the ‘style’ property to the svg’s gradient filled object (element[0]). Then added the value ‘clip-path’ to the style so I could bind the inset clipping to the scroll bar value. Bound it like this:
'inset('+toStr(100-{../Slider.props.value})+'% 0px 0px 0px)'
I bound the text value to the scroll value too.
Here’s my svg:
6 Likes
Very cool, thanks for the info!
Ah yes, I didn't think about clipping. It's much easier than calculating a path! Great work!
Hi - I’ve tried to work through these 2 examples and it works exactly until I get to the point where I would add the styles to the gradient fill. Then it just errors out. How did you do that part without breaking it?
This is still really useful though, gradients / animations and SVG + Perspective is a tricky combination. Still figuring it out. Thanks for sharing this.
It looks like you created the ‘style’ prop as an array instead of an object.
Add the ‘style’ prop as an object to the element.
Once you have a style object in element[0] you can add a value in the style called ‘clip-path’
Ah, I actually figured this out - though it doesn’t work for me with the gradient, only with a solid color :-/ Is there a trick to that part of it?
I have had trouble in the past getting gradients from an svg to show up in perspective but if it is saved properly it should work
I am able to simply drag and drop (as an embedded image) this tank svg directly into a perspective view and the gradient works
Here's a screen shot of the element props that I see when I drop it on the view
I'm using 8.1.1 (8.0.16 worked too)
That part works and shows the gradient as a static image, the animation with the slider only works with a solid color though. Sorry for being unclear.
what does your binding look like?
what if you just use an explicit statement instead of binding the value?
Something like this…
clip-path: inset(50% 0px 0px 0px)
1 Like