如何从vuex操纵内联SVG

Question

所以，我正在为Vuejs和Vuex的游标创建一个自定义工具。目前，我陷入了我必须绑定一个颜色用户的步骤，将点击svg光标的填充。我将尝试逐步介绍每种方法的工作原理以及它应该做什么。

首先，我有不同的内联SVG，它们正在替换默认的HTML游标。这些SVG处于Vuex状态。

只是因为你知道它们是这样的，所以当用户点击第一个组件上的按钮时，脚本会隐藏默认光标并将选定的一个绑定到V-HTML。基本上，我将它们显示为组件中的HTML代码。 这是问题的开始。现在，此选择的光标显示在用户应该能够更改填充颜色的第二个组件上。 我无法弄清楚的是如何才能访问svg中的填充属性？ 我试图通过：fill =“dataName”绑定它，但它不能像那样工作。

我是Vuejs的新手，但我希望我的问题有道理。

Answer 1

问题是您在Vue编译步骤之后插入内联SVG（通过v-html），因此 - 正如您所注意到的那样 - Vue从未看到过该内容。没有更多的背景，很难看到如何实现你想要的。

但是，作为替代方案，您可以让所有游标都使用currentColor作为填充颜色

<path fill="currentColor">

然后简单地将某些包含元素的CSS color属性设置为所需的颜色