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

Question

我有一个.SVG，我用<img src="/image/arrow.svg" alt="Arrow">进行调用。一切都很好，但是我想为<img ... style="color:red">这样的SVG动态设置不同的笔触颜色（不填充颜色...）。我读到可以在路径上使用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 和 previously discussed on StackOverflow 正确陈述的那样，用作图像元素的 svg 具有新的图像上下文，因此它不使用文档的样式，而内联 svg 元素确实使用它们。< /p>

所以下面的例子有效：

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>

Answer 2

如果您从SVG中删除了内联样式，则可以使用CSS来操纵颜色，边框等，如下所示：

svg {
  stroke: #47ccd1;
  fill: transparent;
  stroke-width: 20px;
  stroke-linecap: round;
  transform: scale(0.3);
}

<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"></path>
    <path d="M10 90 L100 0"></path>
</svg>