在 Vue 项目中创建和操作 SVG答案

【问题标题】：Create and Manipulate SVG in Vue project在 Vue 项目中创建和操作 SVG
【发布时间】：2018-09-20 22:14:12
【问题描述】：

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

【问题讨论】：

你是对的，jQuery 和 Vue 不能很好地混合在一起，因为 Vue 的方法是（几乎）从不自己操作 dom，而是让 vue 渲染器为你完成工作，而你只不得不担心数据。根据您的描述，您希望在此示例中实现的目标可以使用 css 轻松完成，并且更具声明性。在这种情况下有什么反对使用 css 的吗？（见这个例子：codepen.io/anon/pen/EEMwbg）

标签： jquery svg vue.js

【解决方案1】：

您可以直接绑定您想要动态的 svg 部分。 Here is a simple tutorial。您需要将 svg 的“标记”从 javascript 变量中取出并放入模板元素中。

Here's a working codesandbox。请注意，您甚至可以使用 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 之前完成所有的属性注入

【讨论】：

将此标记为答案，因为您确实回答了有关如何使其与 Vue 一起使用的问题。但是您的观点是正确的，因为我无法修改 SVG，所以它对我不起作用，但感谢您的洞察力。
你试过用javascript注入绑定吗？

【解决方案2】：

我刚刚找到this package，它将为您内联一个 svg，并让您可以访问一些基本属性。它不会满足您的所有需求，但它看起来是一个非常有用的开始。

【讨论】：