如何在 SVG 中继承描边颜色？（不是填充，而是描边颜色）答案

【问题标题】：How inherit stroke color in SVG? (Not fill, but stroke color)如何在 SVG 中继承描边颜色？（不是填充，而是描边颜色）
【发布时间】：2019-07-08 14:19:38
【问题描述】：

我有一个 .SVG，我用 <img src="/image/arrow.svg" alt="Arrow"> 打电话。一切都很好，但我想为我的 SVG 动态设置不同的笔触颜色（不是填充颜色...），例如 <img ... style="color:red">。我读到我可以在我的路径上使用 fill="currentColor"，但是我该如何处理我的笔触颜色呢？

我的 SVG 文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
    <path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
    <path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>

我的html：

<img src="/image/arrow.svg" alt="Arrow" style="color:red">

【问题讨论】：

图像不能从主文档继承内容。您可以将标记内联。

标签： svg colors stroke

【解决方案1】：

正如Robert Lognson 和previously discussed on StackOverflow 正确指出的那样，用作图像元素的svg 具有新的图像上下文，因此它不使用文档的样式，而内联svg 元素确实使用它们。

所以下面的例子有效：

svg.red {
  color: red;
}

<svg class="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
    <path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
    <path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>

【讨论】：