更改img标签中SVG图像的颜色

Question

我正在尝试更改图像SVG颜色。

  <button>
 <img src="someImage.svg">
 </button>

在Angular 5中，是否可以更改按钮中SVG图像的颜色？

- user9651431

---

请问您能否添加您的SVG文件内容，因为答案取决于它是如何构建的。 - robinvrd

你能够内嵌SVG吗？ - James Coyle

Answer 1

如果SVG在DOM中是内联的，那么可以对SVG应用CSS。最简单的方法是使用SVG注入器。它使用JavaScript加载外部SVG文件，并将HTML元素（通常是<img>元素）替换为SVG标记。

如果您使用SVGInject（https://github.com/iconfu/svg-inject/），则您的HTML将如下所示：

<button>
  <img src="someImage.svg" onload="SVGInject(this)">
</button>

onload属性会在图片加载完成后替换<img>元素，实现魔法般的效果。它应该看起来与原来一样，但你将能够对SVG应用CSS。

- Waruyama

---

不幸的是，<svg> 不支持 alt 属性，这可能对您的文档大纲（SEO）产生灾难性影响。在撰写本文时，(1) 通过 <img> 使用 SVG 的 currentColor 被忽略了 (2) <svg> 不适合替代 <img>，因为缺少 alt-text (3) 因此，在需要设置其颜色的情况下，没有好的方法来利用 SVG (4) 内联 SVG 是臃肿的严重来源，它们不能被引用，而必须被可怕地复制。(总之) SVG 完全糟糕，没有好的解决方法。 - ChaseMoskal

@ChaseMoskal 我刚有了一个想法，或许可以稍微改进一下。动态加载SVG文件，调整颜色，然后创建一个图像元素。这样文档中就会再次包含“img”元素。这至少可以解决“alt”问题。我会检查一下这个方法是否可行。 - Waruyama

Answer 2

我从这里拿了一些代码：http://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/ 你必须使用 object 元素而不是 img 元素。你必须给你的 object 元素一个 id（在示例中为 "svg-object"）。你必须给你的 svg 文件内部的按钮一个 id（在示例中为 external-1）。然后你就可以改变样式了。

var svgObject = document.getElementById('svg-object').contentDocument;
var svg = svgObject.getElementById('external-1');
svg.style.fill = "green"

将SVG内联化可能会更加容易，但是它是可以完成的。

- aptriangle