css - 更改 img src SVG 颜色

Question

这个问题在这里已经有了答案:





img src SVG changing the styles with CSS

(25 个回答)


3年前关闭。




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

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

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

Answer 1

如果 SVG 在 DOM 中是内联的，则可以将 CSS 应用到 SVG。实现这一点的最简单方法是使用 SVG 注入(inject)器。它使用 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。