I want to use a single SVG component within a template to represent a piece of equipment. There are a couple of orientations/options that I will use as parameters that would change how it looks.
I have an SVG for each of the possible configurations.
I'm hoping there might be a way to put each different SVG "code" into a custom string property on the SVG and then bind/update the actual SVG path based on the parameters.
What tools are available to help me achieve this? In the past, I've used multiple overlaid SVGs and only showed the one for the selected configuration, but I'm looking for a cleaner solution.
I haven't gotten around to doing this yet but I think your starting point is rending an SVG from an advanced style sheet and using CSS animations to manipulate it.
All the SVG animation stuff I've seen so far that's doing that kind of animation is rendering the SVG in a CSS style sheet.
This wouldn't be specific to vision/perspective, but I am starting with vision.
It's not necessarily an animation, although I suppose it could be adapted to do that.
I just want to swap out the SVG code/path with one of a handful of pre-defined paths that are just custom string properties on the SVG component and I'm wondering if that's possible/how to do it.
If you're just swapping I would just make a drawing that has the whole machine. Make a copy and delete all the stuff that is static. Draw in the part you're making dynamic (one drawing per animation state). This keeps everything in scale with your overall drawing.
Then just embed each SVG in a container and resize them to the container. From there it's just a visibility animation.
I know it's a little kludgy but it should be fine from a performance perspective and having all the stuff in a container should keep it manageable.
To my knowledge, there is no way to dynamically modify an SVG inside of vision. SVG's inside of vision are for all intents and purposes an image. You could have multiple SVG's and swap them with the visibility but I take that you're aware of that approach. I suppose you might be able to do it with some Java, but I have had no need nor the desire to take that approach.
IMHO, the much better approach (if not the only one) in vision is to use a paintable canvas. Several posts about that approach around the forum.
With perspective, however, this is possible. How you would do it would depend on what exactly you're needing.
A good starting example:
Based on what you say you're wanting to do, I would create multiple elements or groups of elements for each of the configurations. Then I would apply a visibility property with a binding to make them visible or not based on the selected configuration.
One option would be to save the SVGs as images to the image management library. Then render the images with the image component using the image library paths. The path property on the image component can be scripted or bound, so this would give you the exact functionality you are asking for.
True, but then with the added dependency of making sure those images exist on a machine that you're restoring a gateway backup on, not to mention you lose the smooth scaling feature of SVGs and all the other bindable properties of an SVG component.