css 如何在html中嵌入svg图标并更改其颜色？

fumotvh3 于 12个月前发布在其他

关注(0)|答案(1)|浏览(189)

如何在html中嵌入svg图标并使用css fill属性更改其颜色？

<svg>
 <use xlink:href="assets/images/icon-reaction.svg"></use>
 </svg>

字符串
我试过这种方法，但没有工作。

<img src="assets/images/icon-reaction.svg">

型

1条答案

您不能使用fill属性更改外部文件的颜色。您可以将SVG信息放在页面的任何位置（通常在底部），然后在需要的位置使用<use>标记。

svg {
  width: 4em;
  height: 4em;
  fill: navy;
  }

个字符
这种方法在使用多个SVG时很常见，这样可以避免页面加载时进行多个连接。其他SVG在同一个<svg>标记中的其他<symbol>标记中定义。