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

Question

I have an svg file, say a.svg, with the content:

<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没有描边颜色，但我希望可以在 CSS 中导入此 SVG 时设置描边颜色，像这样用 <img> 标签导入：

HTML：

<img src="a.svg">

CSS（层叠样式表）：

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

我如何能够做到这一点？

- swift-lynx

---

你可以尝试为图像使用边框。因为你正在使用svg作为图像的src导入。 - Sethuraman

Answer 1

由于SVG在<img>标签中，您无法使用CSS样式进行设置。建议考虑使用内联SVG。有关更多详细信息，请参见https://css-tricks.com/using-svg/#article-header-id-6。

- Andi Qu

Answer 2

无法通过<img>标签来样式化导入的SVG。您必须编辑SVG文件，更改将自动显示在HTML页面上。 根据您的SVG，新代码应如下所示：

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

只需在两个line标签上添加stroke="blue"（将blue替换为您选择的颜色）。

- Adam Beleko