在Vue项目中创建和操作SVG

Question

我是Vue.js新手，需要创建一个Vue组件来创建和操作SVG。根据我的理解，在Vue组件中使用JQuery不是最好的。但是，我想这样做，因为选择元素是如此的简单。

这是我的Vue组件，但我不知道如何使它发挥功能。(注意: SVG将来自web服务，因此我需要以编程方式将其附加到DOM中。)

<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)。

​

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

​

Answer 1

您可以直接绑定svg中想要动态的部分。下面是一个简单的教程。您需要从javascript变量中获取svg的“标记”，并将其放入一个模板元素中。

这是一个工作密码箱。请注意，您甚至可以使用CSS动画您的svg。不错吧，嗯？

下面是你的一个动态循环元素.

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

您通过webservice加载svg的要求将使事情复杂化。这不是加载-挑战是将绑定注入svg的源。您可以使用Dom方法和setAttribute()来完成这一任务。setAttribute()将允许您设置您喜欢的任何属性，从:和@开始，因此实际上是将您的svg转换为一个带有javascript的vue模板。这段代码很脆弱，很容易受到svg结构变化的影响，但是它会让你摆脱困境。在初始化Vue之前，需要执行所有属性注入

Answer 2

我刚刚找到了这个包裹，它将为您内联一个svg，并允许您访问一些基本属性。它不会做你所需要的一切，但它看起来是一个非常有用的开端。