如何在HTML中更改SVG图标的颜色

简介

SVG是一种使用XML语言描述二维图形的格式，它与HTML和CSS通常一起使用来创建具有可缩放矢量图形的网站。其中，SVG图标的颜色与其它图标不同，因为它们是矢量而不是像素图像，因此它们可以随意缩放而不失真。但是，如果您想更改SVG图标的颜色，这可能会有点棘手，因为SVG图标不仅由路径和形状组成，还包括填充和曲线颜色。在本文中，我们将介绍如何更改SVG图标的颜色。

如何更改SVG图标的颜色

方法一：使用CSS fill属性

在SVG元素中，可以使用CSS的fill属性来更改图标的填充颜色。可以在SVG元素的样式表中添加fill属性，如下所示：

<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2L3 9H5V15H13V21L21 14H19V8H12V2Z" fill="#41B883"/>
</svg>

在上述示例中，SVG图标的填充颜色为#41B883。可以更改该属性来更改填充颜色。

方法二：使用CSS filter属性

CSS的filter属性可以用来更改SVG图标的颜色。使用CSS中的filter属性时，可以使用hue-rotate()函数来更改SVG图标的颜色。其中hue-rotate()函数将颜色轮旋转给定角度，从而更改元素的颜色。以下是使用hue-rotate()函数更改SVG图标颜色的示例：

<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2L3 9H5V15H13V21L21 14H19V8H12V2Z" class="icon"/>
</svg>

.icon {
  filter: hue-rotate(120deg);
}

在上述示例中，filter属性被应用到SVG图标的CSS类icon中，hue-rotate()函数将该元素的色调旋转120度，从而更改了其颜色。

结论

无论您使用哪种方法更改SVG图标的颜色，都可以轻松地在HTML中实现。使用CSS fill属性或filter属性，您可以创建适合您网站设计风格的SVG图标。