如何在 <img> 标签中更改 svg 的笔触颜色？ [复制]

Posted 2023-03-06

【中文标题】如何在 <img> 标签中更改 svg 的笔触颜色？ [复制]

【英文标题】：how to change stroke color on svg in <img> tag? [duplicate]

【发布时间】：2019-09-08 16:58:24

【问题描述】：

我有一个 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- stroke-linecap="round"/>
        <line x1="25" y1="35" x2="35" y2="24.6" stroke- stroke-linecap="round"/>
    </g>
</svg>

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

html：

<img src="a.svg">

CSS：

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

我怎么能做到这一点？

【问题讨论】：

您可以尝试为图片使用边框。由于您使用 svg 作为图像的 src 导入。

【参考方案1】：

无法为通过标签导入的 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- stroke-linecap="round"/>
        <line x1="25" y1="35" x2="35" y2="24.6" stroke="blue" stroke- stroke-linecap="round"/>
    </g>
</svg>

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

【参考方案2】：

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