I have an SVG image, part of which I dynamically change depending on the responses from the API call. One aspect that I'm changing is the color of the various elements in the SVG, which I can handle somewhat cleanly using various CSS classes. However, there are text elements that I would like to change.
I'm currently working by inserting the full SVG image into my component template and highlighting the parts that I want to snap to the model. However, this means that anytime I want to edit a raw SVG image, I need to copy / paste the SVG markup back into the template and reapply these bindings.
Ideally, what I would do is save the SVG as an external file and then include the SVG as part of the build process so that I can avoid the sandbox (something that I can do now), but I also want to dynamically apply data bindings through a selector (e.g. id / class associated with each SVG subitem) after the SVG is embedded. The two solutions I came up with is to create a directive that will do some DOM manipulation in order to associate the relative elements with the values I want to set, or change the SVG tags in the post-inline build process to add Angular here. Not a single option suits me.
Is there any other way to do this that I am missing?
source
share