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

Question

我有一个 .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">

Answer 1

由于 Robert Lognson correctly stated, and previously discussed on Whosebug，用作图像元素的 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>

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

How inherit stroke color in SVG? (Not fill, but stroke color)

svg

colors

stroke

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

How inherit stroke color in SVG? (Not fill, but stroke color)

svg

colors

stroke

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