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

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

Answer 2

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