如何在 <img> 标签中更改 svg 上的描边颜色？

Question

我有一个 svg 文件，例如 a.svg，其内容为：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <g fill="none" fill-rule="evenodd">
        <line x1="25" y1="15" x2="35" y2="24.6" stroke-width="3" stroke-linecap="round"/>
        <line x1="25" y1="35" x2="35" y2="24.6" stroke-width="3" stroke-linecap="round"/>
    </g>
</svg>

svg 没有描边颜色，但是当我使用如下标签导入此 svg 时，我希望能够在 css 中设置描边颜色：

HTML：

<img src="a.svg">

CSS：

img {
    stroke: red;
    /* This doesn't work */
}

我怎样才能做到这一点？

Answer 1

由于 SVG 位于<img>标签中，因此您无法使用 CSS 对其进行样式设置。考虑使用内联 SVG 之类的东西。有关更多详细信息，请参阅https://css-tricks.com/using-svg/#article-header-id-6 。