Jquery 在Vue项目中创建和操作SVG

我是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-div'.htmlsvg； $'circle'.mouseenterfunction{ $this.attr'opacity'，'1'； }; $'circle'.mouseleave函数{ $this.attr'opacity'，'.3'； }; 将鼠标悬停在灯光上以打开它们

---

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

。请注意，您甚至可以使用CSS设置svg的动画。不错吧

下面是一个动态循环元素的外观

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

---

您需要通过webservice加载svg，这将使事情变得复杂。这不是加载——挑战在于将绑定注入svg的源代码中。您可以使用Dom方法和。setAttribute将允许您设置任何您喜欢的属性，从：和@开始，因此您实际上是在使用javascript将svg转换为vue模板。这段代码很脆弱，很容易受到svg结构变化的影响，但它会让您摆脱困境。在初始化Vue之前，需要执行所有属性注入，这将为您内联svg，并使您能够访问一些基本属性。它不会做您需要的所有事情，但它看起来是一个非常有用的开始。

您是对的，jQuery和Vue不能很好地结合在一起，因为Vue的方法几乎从不自己操作dom，而是让Vue渲染器为您完成工作，而您只需担心数据。从您所描述的内容来看，在这个示例中，您想要实现的目标很容易通过css实现，而且它更具声明性。在这种情况下，有什么东西反对使用css吗？请参见此示例：将此标记为答案，因为您确实回答了有关如何使其与Vue一起工作的问题。但是你的观点是正确的，因为我不能修改SVG，所以它对我来说不起作用，但是请欣赏我的见解。你尝试过用javascript注入绑定吗？