在Vue项目中创建和处理SVG [英] Create and Manipulate SVG in Vue project

问题描述

我是Vue.js的新手，需要创建一个Vue组件来创建和操作SVG.据我了解，最好不要在Vue组件中使用JQuery.但是我想因为选择元素非常简单.

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 to because it's so straightforward to select elements.

这是我的Vue组件，但是我不确定如何使它起作用. (注意:SVG将来自Web服务，因此我需要以编程方式将其附加到DOM.)

Here is my Vue component, but I'm not sure how to make it functional. (Note: the SVG will be coming from a web service so I need to append it to the DOM programmatically.)

<div id="app">
  <p>Hover mouse over the lights to turn them on.</p>
  <p>(How do I make this work??)</p>
  <div id="svg-div" v-html="svg" />
</div>

new Vue({
  el: '#app',
  data: {
    svg: `
      <svg width="50" height="120">
          <rect x="10" y="10" width="40" height="120" style="fill:black" />
          <circle cx="30" cy="30" r="15" fill="red" opacity=".3"/>
          <circle cx="30" cy="65" r="15" fill="yellow" opacity=".3"/>
          <circle cx="30" cy="100" r="15" fill="lightgreen" opacity=".3"/>
      </svg>`
  }
})

这是一个使用JQuery的有效示例(非Vue).

Here is a working example (non Vue) using JQuery.

var svg = `
<svg width="50" height="120">
  <rect x="10" y="10" width="40" height="120" style="fill:black" />
  <circle cx="30" cy="30" r="15" fill="red" opacity=".3"/>
  <circle cx="30" cy="65" r="15" fill="yellow" opacity=".3"/>
  <circle cx="30" cy="100" r="15" fill="green" opacity=".3"/>
</svg>
`;

$('#svg-div').html(svg);

$('circle').mouseenter(function() {
	$(this).attr('opacity', '1');
});

$('circle').mouseleave(function() {
	$(this).attr('opacity', '.3');
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover mouse over the lights to turn them on.</p>
<div id="svg-div" />

推荐答案

您可以直接绑定要动态化的svg部分. 这是一个简单的教程.您需要从javascript变量中获取svg的标记"，并放入模板元素中.

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.

这是一个有效的codeandbox .请注意，您甚至可以使用CSS为svg设置动画.还不错吧?

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"/>

您通过网络服务加载svg的要求会使事情复杂化.这不是负载-挑战是将绑定注入svg的源.您可以使用Dom方法和 setAttribute()来做到这一点. setAttribute()可以让您设置任何喜欢的属性，以:和@开头，因此实际上是使用javascript将svg转换为vue模板.该代码将很脆弱，并且容易受到svg结构的更改的影响，但会使您陷入困境.您需要在初始化Vue之前进行所有属性注入

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

这篇关于在Vue项目中创建和处理SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！