Html 如何在<；中更改svg上的笔划颜色；img>；标签？

我有一个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位于

标记中，所以不能使用CSS对其进行样式设置。考虑使用类似于在线SVG的东西。有关更多详细信息，请参阅。

无法设置通过标记导入的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>

---

只需在两个

行

标记上添加stroke=“blue”（用您选择的颜色替换蓝色）

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

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

<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>