I'm looking for an option to bind Vue.js directives to elements in SVG. For example I have SVG image created in inkscape, key elements of this image have ids
<svg>
...
<g id="layer 1" inkscape:label="layer 1">
...
<g id="active_element1">
<img inkscape:export-filename="important_element1.png">
I was able to load SVG with vue-svg-loader as a component, but it doesn't consider what is inside SVG. I also tried to add directives to SVG in inkscape and load as plain text to tag, but then Vue needs some kind of recompile.
Is there a prettier way to get to elements inside SVG?
I recommend using anime.js, I also work with vue js and for animations use anime.jsi
Related
I have a bundle of SVG components in my sprite.SVG file and an HTML page where I am including those SVG components here in HTML.
eg:
<svg class="svg-icon">
<use xlink:href="sprite.svg#hiw-svg"></use>
</svg>
Now , I want to apply javascript on the components of svg's which I included, So how should I do that, since those components are defined in sprite.svg file.
One possible solution is that I include those sprite symbols directly as svg in my html but I don't want to do that as I have lots of svg's which will take lot of space in html.
So what is is the best way I can apply GreenSock js or simply (JS) for animations on sprite.svg file.
There's a way to use javascript inside the svg when using an object tag to embed svg.
Here's an example of embedding the javascript animation inside the svg file itself.
https://codesandbox.io/s/inline-svg-javascript-with-object-iy2mq?file=/index.html
I have an SVG sprite file which was supplied by designers for my app. The convention they'd like me to use to render their SVG icons is to load the sprite at the top of the <body> element and then render icons like this:
<svg class="u-icon-gear-dims">
<use xlink:href="#gear"></use>
</svg>
This works when I add the SVG sprite inline, that is, plop the entire contents of the SVG sprite into my template.html file. Adding the sprite inline makes the html file ugly but, more significantly, having to manually do it raises maintainability concerns.
I'm currently referencing the individual SVGs directly to render icons, but this has performance implications as there is often a split second delay when the icon has not yet been loaded.
I found this SO topic, but there does not appear to be a viable answer.
FWIW, our app uses webpack and I'm currently trying to load the SVG sprite into a template HTML file.
How can I dynamically load an SVG sprite from a file in an HTML file?
Are you using PHP? There are methods for including SVG markup inline using backend languages.
https://sheelahb.com/blog/how-to-get-php-to-play-nicely-with-svg-files/
How can I edit an SVG same like fill color and other methods of SVG I want to place an SVG/PNG inside an SVG at some specific path/group of SVG, How come it is possible can anyone help me out on this?
I'm sure there are other libraries out there but I used Snap on a project to edit SVGs based on user selections. http://snapsvg.io/
As for the embedding question, there are other stackoverflow questions that answer that Why nest an <svg> element inside another <svg> element?
I have an SVG image, parts of which I change dynamically depending on responses from an API call. One aspect I change is the colour of different elements within the SVG, which I can handle somewhat cleanly via applying different CSS classes. However there are also text elements that I would like to change.
I have this currently working by inlining the full SVG image into my component template and picking out the parts I wish to bind to the model. However, this means that any time I want to edit the 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 keep the SVG as an external file, then inline the SVG as part of the build process so I can avoid sandboxing (something I can currently do), but I also want to dynamically apply the data bindings via a selector (e.g. id/class associated with each SVG sub-element) after the SVG is inlined. Two solutions I've come up with would be to create a directive that would do some DOM manipulation to associate the relative elements with the values I want to set, or to modify the SVG tags in the build process post-inline to add the Angular binding syntax here. Neither option seems great to me.
Is there another way to do this that I'm missing?
While I have found variations of this question I have not found a solution for my problem.
For the sake of brevity I have the following structure...
<svg>
<g>
<rect></rect>
<rect></rect>
<rect></rect>
</g>
</svg>
I can animate these rect elements by adding a use element beneath the rect elements within the group.
However, if I try to dynamically create a use element with animation rules to insert after the rect elements and inside the group, the animation does not take place.
When reviewing in Chrome Dev Tools, I can see that the dynamically created elements are there, but the animation is not taking place.
I have tested in FF and Chrome, and neither work.
I have read that this may be a Chrome bug, but most of the threads that I read were older, and am not sure if a solution has been found yet.
When I am creating my elements I am using createElementNS.
I have tried adding the FakeSmile library even though this seems to be IE specific.
I am only using JavaScript, no jQuery.
If I am not making myself clear, here is the desired result: http://codepen.io/JoeyCinAZ/pen/Hstkr
and here is the non-functioning example: http://codepen.io/JoeyCinAZ/pen/GHhbw
You are creating the <use> element with createElement when you need to use createElementNS to create the element in the SVG namespace.
Also you're trying to set the xlink attribute using setAttribute when you must use setAttributeNS to set it in the xlink namespace.