有一次，有人告诉我他们使用 SVG 图标遇到的最大问题是，图标的颜色与旁边的文本颜色不匹配。事实上，这个问题对他们来说非常严重，以至于尽管看到了 SVG 图标的优势，他们仍然坚持使用图标字体。当时我没有想到，但这个问题其实有一个非常简单的解决方案。
这个想法是使用 CSS 中的 currentColor 值，将文本颜色传递给 SVG 形状。例如
<h1>
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-phone"></use>
</svg>
Call Me
</h1>h1 {
color: blue;
}
h1 svg {
fill: currentColor;
}您可以简化此操作，并让填充级联到 SVG
h1 {
color: blue;
fill: currentColor;
}所以填充会级联，是不是很巧妙？如果这么简单，为什么我们不直接这么做呢？
body {
fill: currentColor;
}fill 仅影响 SVG，因此它不会做我们不想做的事情，并且可以通过更具体的选择器轻松覆盖。
问题是，它并不能直接按预期工作。
以这个例子为例，它只是我们原始示例在 <body> 中的内容
<body>
<h1>
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-phone"></use>
</svg>
You'd think the SVG would fill blue too?
</h1>
</body>然后
body {
fill: currentColor;
color: red;
}
h1 {
color: blue;
}
svg {
border: 5px solid currentColor;
}<svg> 的 currentColor 是什么？是 blue，对吧？因为 color 会级联（继承）。我们可以看到这是正确的，因为该 svg 上的边框将是蓝色。但是图标本身（实际上是一个绘制的 <path>）将是 red。
很奇怪，我认为。
更新：Chrome 现在（正常）工作了。Firefox 和 Safari 仍然显示奇怪的红色填充。
但这并不是什么大问题，因为您可以
svg {
fill: currentColor;
}这将确保它从您通常期望它获取的颜色中获取颜色。您还可以将填充应用于 use、path、symbol、circle、rect 等，但是点击 svg 就可以覆盖所有内容（这对于简单的单色用例来说很好）。
查看 Chris Coyier 在 CodePen 上创建的 Pen lcDBd（@chriscoyier）。
有趣。这是否可以以某种方式与作为背景图像加载的 SVG 一起使用？
我猜应该是 SVG 文档中具有预定义颜色的锚点。
我以前见过类似的技巧，其中文件路径类似于 svg.svg?color=#f00，并且 .svg 内的一些 JS 运行并自行着色。
这很酷，尽管我对非 JS 解决方案最感兴趣。
我认为没有纯 HTML/CSS 解决方案。
作为边框图像使用的 SVG 怎么样？
它将继承字体颜色。
不过，我不知道它是否有用……
不错。看起来
currentColor在 IE9+ 中也适用（与普通的 SVG 相同），因此这是该值的绝佳用途。就在我确信currentColor没什么用的时候，你证明我错了。:) 谢谢！由于 fill: 仅影响 svg，因此它无法通过 w3.org css 验证，我应该担心吗？？？
不用。
太棒了。昨天在整理一个新的笔时看到了它的抢先预览。
遗憾的是，它不适用于外部精灵方法。如果有一种方法可以将 SVG 保留在外部文件中以进行缓存，并且可以在其上使用 fill 等功能，那我会非常高兴。
照目前的情况来看，我仍然在来回权衡是将 SVG 内联并保留所有样式功能，还是将其外联并获取缓存。
我真的很感谢你涵盖所有这些 SVG 内容，Chris！你现在可以写一整本书了。
嗨，Chris，
我想知道是否可以将 svg 文件放在 div 中，然后使其具有响应性。我在 http://topgravity.com/ 的首页上使用了 D3（库）碰撞检测球，但问题是我无法使该 svg 的宽度和高度等于屏幕尺寸。如果我增加宽度和高度，则在小屏幕上会出现非常糟糕的界面。我希望它能够根据屏幕尺寸进行响应。如果您能提供一些建议，我将不胜感激。
很棒的文章，曾经在 SVG 格式的徽标中添加过渐变，我想这超出了范围，并为更多实验提供了可能性。很棒的技巧。