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。

Answer 2

无法设置通过标签导入的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”（用您选择的颜色替换蓝色）

如何在<img/>标签中的svg上更改笔触颜色？

2 个答案: