css - 从 css 更改 SVG 颜色

Question

我有这个CSS：

div {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 100px;
  background: url(http://s.cdpn.io/3/kiwi.svg) no-repeat center;
  background-size: 82px 82px;
  border:solid 5px black;
  border-radius:200px;
  padding:25px;
}

是否可以从 css / jquery 更改 svg 颜色？
如果不是，我不想直接从 html 执行此操作
。我可以对 PNG 做吗？

http://jsfiddle.net/g8GPf/

谢谢

Answer 1

简单回答是不。您不能使用 CSS 来设置以这种方式嵌入的 SVG 样式。

但是，您可以使用 Ravi 链接的技巧将 SVG 引用更改为内联 SVG。

另一个替代技巧是更改 SVG，以便您想要显示为颜色的部分在 SVG 中是透明的。并使 SVG 的“背景”为纯白色。然后您可以更改 的background-color，<div>它会通过 SVG 的透明部分显示。