Create and Manipulate SVG in Vue project

Question

I\'m new to Vue.js and need to create a Vue component to create and manipulate SVG. From my understanding it\'s not best to use JQuery in a Vue component. However I would like

Answer 1

You can just directly bind the parts of the svg that you want to be dynamic. Here is a simple tutorial. You need to get the 'markup' of your svg out of javascript variables and into a template element.

Here's a working codesandbox. Note that you can even animate your svg with CSS. Not bad, eh?

Here's what one of your dynamic circle elements looks like...

<circle cx="30" cy="30" r="15" fill="red" :opacity="redO" @mouseenter="redO = 1" @mouseleave="redO = .3"/>

Your requirement to load the svg via webservice will complicate things. It's not the loading - the challenge is to inject the bindings into the source of the svg. You can do this with Dom methods and setAttribute(). setAttribute() will let you set whatever attributes you like, starting with : and @, so you're essentially transforming your svg into a vue template with javascript. This code will be brittle, and vulnerable to changes in the structure of the svg, but it will get you out of a hole. You need to do all the attribute injecting before you initialize Vue

Answer 2

I just found this package, that will inline an svg for you, and give you access to some basic properties. It won't do everything you need, but it looks to be a very useful start.