Question

我尝试了各种方法，但总是黑了。

我有这个svg：

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>power-cord</title>
  <path d="M32 8.828l-2.828-2.828-5.586 5.586-3.172-3.172 5.586-5.586-2.828-2.828-5.586 5.586-3.586-3.586-2.707 2.707 16 16 2.707-2.707-3.586-3.586 5.586-5.586z"></path>
  <path d="M24.814 21.056l-13.87-13.87c-2.994 3.591-6.391 9.139-4.044 13.913l-4.133 4.133c-0.972 0.972-0.972 2.563 0 3.535l0.464 0.464c0.972 0.972 2.563 0.972 3.536 0l4.133-4.133c4.774 2.348 10.322-1.049 13.913-4.043z"></path>
</svg>

Webpack / Quasar / Vue正在打包并将其交付到此图像标签中：

<img src="data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogIDx0aXRsZT5wb3dlci1jb3JkPC90aXRsZT4KICA8cGF0aCBkPSJNMzIgOC44MjhsLTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuMTcyLTMuMTcyIDUuNTg2LTUuNTg2LTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuNTg2LTMuNTg2LTIuNzA3IDIuNzA3IDE2IDE2IDIuNzA3LTIuNzA3LTMuNTg2LTMuNTg2IDUuNTg2LTUuNTg2eiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0yNC44MTQgMjEuMDU2bC0xMy44Ny0xMy44N2MtMi45OTQgMy41OTEtNi4zOTEgOS4xMzktNC4wNDQgMTMuOTEzbC00LjEzMyA0LjEzM2MtMC45NzIgMC45NzItMC45NzIgMi41NjMgMCAzLjUzNWwwLjQ2NCAwLjQ2NGMwLjk3MiAwLjk3MiAyLjU2MyAwLjk3MiAzLjUzNiAwbDQuMTMzLTQuMTMzYzQuNzc0IDIuMzQ4IDEwLjMyMi0xLjA0OSAxMy45MTMtNC4wNDN6Ij48L3BhdGg+Cjwvc3ZnPgo=" class="profile">

酷！

现在我应该可以使用fill为它着色了吗？在Chrome devtools中，我看到了应用了fill属性（通过CSS并对其进行了摆弄）

<img src="data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogIDx0aXRsZT5wb3dlci1jb3JkPC90aXRsZT4KICA8cGF0aCBkPSJNMzIgOC44MjhsLTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuMTcyLTMuMTcyIDUuNTg2LTUuNTg2LTIuODI4LTIuODI4LTUuNTg2IDUuNTg2LTMuNTg2LTMuNTg2LTIuNzA3IDIuNzA3IDE2IDE2IDIuNzA3LTIuNzA3LTMuNTg2LTMuNTg2IDUuNTg2LTUuNTg2eiI+PC9wYXRoPgogIDxwYXRoIGQ9Ik0yNC44MTQgMjEuMDU2bC0xMy44Ny0xMy44N2MtMi45OTQgMy41OTEtNi4zOTEgOS4xMzktNC4wNDQgMTMuOTEzbC00LjEzMyA0LjEzM2MtMC45NzIgMC45NzItMC45NzIgMi41NjMgMCAzLjUzNWwwLjQ2NCAwLjQ2NGMwLjk3MiAwLjk3MiAyLjU2MyAwLjk3MiAzLjUzNiAwbDQuMTMzLTQuMTMzYzQuNzc0IDIuMzQ4IDEwLjMyMi0xLjA0OSAxMy45MTMtNC4wNDN6Ij48L3BhdGg+Cjwvc3ZnPgo=" class="profile" style="
    fill: purple;
    color: purple;
">

但是小家伙总是出现黑色：-（

使用fill="purple"编辑和重新打包svg的方法有效。使用fill="var(--q-color-primary)"时不使用CSS变量。

<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <title>power-cord</title>
  <path fill="var(--q-color-primary)" d="M32 8.828l-2.828-2.828-5.586 5.586-3.172-3.172 5.586-5.586-2.828-2.828-5.586 5.586-3.586-3.586-2.707 2.707 16 16 2.707-2.707-3.586-3.586 5.586-5.586z"></path>
  <path fill="purple" d="M24.814 21.056l-13.87-13.87c-2.994 3.591-6.391 9.139-4.044 13.913l-4.133 4.133c-0.972 0.972-0.972 2.563 0 3.535l0.464 0.464c0.972 0.972 2.563 0.972 3.536 0l4.133-4.133c4.774 2.348 10.322-1.049 13.913-4.043z"></path>
</svg>

我将拥有100张这些图像，这些图像需要以不同的主题进行着色，并且会喜欢一个简单的资产管道。

打包后动态更改这些图像颜色的最简单方法是什么？

谢谢！

Answer 1

你不能做你想做的事。

通过数据URL加载的图像将被视为不同文件系统上的图像文件。一旦将它们解码并渲染，它们实际上就是位图图像-就像它们是PNG一样。

您的选择是：

在您的HTML中内嵌SVG
使用<object>嵌入SVG并使用JS更改样式
使用JS代码，用相关文件中注入的SVG替换您的<img>标签。
具有多个具有不同颜色的SVG版本（作为单独的SVG或通过使用SVG Sprite表）。

关于：内联svg与图标字体，this article很好地总结了一下：“如果可以使用IE 9 + / Android 3+，则内联SVG几乎在所有方面都比图标字体更好。”

如何更改Webpack打包的内嵌svg的颜色？

1 个答案: