更改 img src SVG 颜色 [重复]

Posted 2023-03-06

【中文标题】更改 img src SVG 颜色 [重复]

【英文标题】：Change img src SVG color [duplicate]

【发布时间】：2019-06-30 14:09:42

【问题描述】：

这里我正在尝试更改图像 svg 颜色。

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

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

【问题讨论】：

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

你能嵌入 SVG 内联吗？

【参考方案1】：

如果 SVG 在 DOM 中是内联的，您可以将 CSS 应用到 SVG。实现这一点的最简单方法是使用 SVG 注入器。它使用 javascript 加载外部 SVG 文件并用 SVG 标记替换 html 元素（通常是 <img> 元素）。

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

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

onload 属性通过在加载图像后替换 <img> 元素来发挥作用。它应该看起来一样，但您可以将 CSS 应用到 SVG。

【讨论】：

很遗憾，<svg> 不支持 alt 属性，这可能对您的文档大纲 (seo) 造成灾难性影响。在撰写本文时，(1) svg currentColor 在通过 <img> 使用时被忽略 (2) <svg> 由于缺少 alt-text (3) 而不是 <img> 的合适替代品，因此没有好处在需要设置颜色的地方使用 SVG 的方法 (4) 内联 SVG 是一个严重的臃肿来源，它们不能被引用，而是必须被可怕地复制。 （结论）SVG 非常糟糕，没有好的解决方法

@ChaseMoskal 我刚刚有了一个想法，这可能会稍微改进一下。如何动态加载 SVG，调整颜色，然后从中创建图像元素？然后该文档将再次包含imgelements。这至少可以解决alt 的问题。我会检查这是否有效。

【参考方案2】：

我从以下地址获取了一些代码：http://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/ 您必须使用 object 元素而不是 img 元素。你必须给你的对象元素一个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 稍微容易一些，但可以做到。