Creando / manipulando SVG en proyecto Vue

Soy nuevo en Vue.js y necesito crear un componente de Vue para crear y manipular SVG. A mi entender, no es mejor usar JQuery en un componente de Vue. Sin embargo, me gustaría porque es muy sencillo seleccionar elementos.

Aquí está mi componente Vue, pero no estoy seguro de cómo hacerlo funcional. (Nota: el SVG provendrá de un servicio web, por lo que debo adjuntarlo al DOM mediante progtwigción).

Hover mouse over the lights to turn them on.

(How do I make this work??)

new Vue({ el: '#app', data: { svg: ` ` } })

Aquí hay un ejemplo de trabajo (no Vue) usando JQuery.

 var svg = `       `; $('#svg-div').html(svg); $('circle').mouseenter(function() { $(this).attr('opacity', '1'); }); $('circle').mouseleave(function() { $(this).attr('opacity', '.3'); }); 
  

Hover mouse over the lights to turn them on.

Puede enlazar directamente las partes del svg que desea que sean dinámicas. Aquí hay un tutorial simple . Necesita obtener el ‘marcado’ de su svg fuera de las variables de javascript y en un elemento de plantilla.

Aquí hay una caja de códigos de trabajo . Se ve muy bien

Así es como se ve uno de los elementos de tu círculo dynamic …

  

Su requisito para cargar el svg a través del servicio web complicará las cosas. No es la carga, el desafío es inyectar los enlaces en la fuente del svg. Puedes hacer esto con los métodos Dom y setAttribute () . setAttribute () te permitirá establecer los atributos que desees, comenzando con: y @, por lo que esencialmente estás transformando tu svg en una plantilla vue con javascript. Este código será frágil y vulnerable a los cambios en la estructura del svg, pero lo sacará de un agujero. Debe hacer todo el atributo de inyección antes de inicializar Vue

Acabo de encontrar este paquete , que incluirá un svg para usted y le dará acceso a algunas propiedades básicas. No hará todo lo que necesita, pero parece ser un comienzo muy útil.