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

＆＃13;

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');
});

＆＃13;

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

＆＃13;

Answer 1

您可以直接绑定您想要动态的svg部分。 Here is a simple tutorial。你需要获得标记＆＃39;你的svg用javascript变量和模板元素。

<强> Here's a working codesandbox 即可。看起来很酷。

这是您的动态圈元素之一......

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

您通过webservice加载svg的要求会使事情变得复杂。它不是加载 - 挑战是将绑定注入svg的源。您可以使用Dom方法和setAttribute()来完成此操作。 setAttribute（）允许你设置你喜欢的任何属性，从：和@开始，所以你基本上用savascript将你的svg转换为vue模板。这段代码很脆弱，容易受到svg结构变化的影响，但它会让你走出困境。在初始化Vue

之前，您需要执行所有属性注入

Answer 2

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

在Vue项目中创建/操作SVG

2 个答案: