SVG CSS改变填充颜色

在网页开发中，SVG（Scalable Vector Graphics 可缩放矢量图形）被广泛应用于图标、图表、动画等领域。SVG本质上是一种XML格式的矢量图形，具有无限放大不失真的优点。在SVG中，可以使用CSS样式来改变图形的填充颜色、边框颜色等属性，使得我们可以通过简单修改CSS样式就可以改变SVG图形的外观。

本文将详细介绍如何通过CSS来改变SVG图形的填充颜色，包括内联SVG和外部SVG的情况。

内联SVG

内联SVG指的是将SVG代码嵌入到HTML文档中的方式，可以直接在HTML中使用CSS来改变SVG的样式。

基本用法

首先，我们需要在HTML文档中嵌入SVG代码，例如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <rect x="0" y="0" width="24" height="24" fill="red"/>
</svg>

上面的代码中，我们定义了一个宽高为24的正方形，并将其填充颜色设为红色。接下来，我们可以使用CSS来修改SVG图形的填充颜色：

rect {
  fill: blue;
}

通过将fill属性设置为不同的颜色值，我们可以轻松改变SVG正方形的填充颜色。

使用类选择器

除了直接选取SVG元素，我们也可以给SVG元素添加类名，然后使用类选择器改变其样式。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <rect x="0" y="0" width="24" height="24" class="my-rect"/>
</svg>

.my-rect {
  fill: green;
}

这样，我们将SVG正方形元素添加了my-rect类名，并通过CSS将其填充颜色改为绿色。

外部SVG

外部SVG指的是将SVG代码保存在一个独立的SVG文件中，然后通过<img>标签或者CSS的background-image来引入SVG图像。

使用`<img>`标签

在HTML文档中通过<img>标签引入外部SVG文件，如下所示：

<img src="rectangle.svg" alt="Rectangle" class="svg-image">

在外部的SVG文件rectangle.svg中，我们定义了一个与内联SVG相同的正方形图形，代码如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100">
  <rect x="0" y="0" width="24" height="24" fill="red"/>
</svg>

同样地，我们可以通过CSS来改变<img>标签对应的SVG图形的填充颜色：

.svg-image {
  filter: hue-rotate(90deg);
}

上面的代码会将SVG图形的颜色旋转90度，从而改变其填充颜色。

使用`background-image`

除了使用<img>标签，我们还可以通过CSS的background-image属性来引入外部SVG文件。

<div class="svg-background"></div>

.svg-background {
  width: 100px;
  height: 100px;
  background-image: url('rectangle.svg');
}

通过上述代码，我们将外部SVG文件rectangle.svg作为div元素的背景图，同样可以通过CSS来改变其填充颜色。

总结

本文介绍了如何通过CSS来改变SVG图形的填充颜色，包括内联SVG和外部SVG的情况。通过简单的CSS样式修改，我们可以轻松实现SVG图形颜色的变换，使得网页中的SVG图形更加生动多彩。

SVG CSS改变填充颜色