CSS 我无法更改 SVG Sprite 的填充颜色

在本文中，我们将介绍如何通过CSS更改SVG Sprite的填充颜色。SVG Sprite是一种将多个SVG图像组合到一个文件中的技术，它可以提供更好的性能和可维护性。然而，在使用SVG Sprite时，有时候我们遇到了无法更改填充颜色的问题。接下来，我们将通过实例说明如何解决这个问题。

阅读更多：CSS 教程

原因分析

首先，让我们了解一下为什么无法更改SVG Sprite的填充颜色。SVG Sprite中的每一个图像都是一个独立的图标，它们使用相同的CSS类名进行引用。当我们使用CSS来更改一个具体的图像的样式时，所有使用相同类名的图像都会受到影响。填充颜色也是一个属性，它会被共享给所有使用相同类名的图像。因此，我们无法直接针对单个图像改变填充颜色。

解决方法

为了解决这个问题，我们可以通过一些技巧来改变SVG Sprite中特定图像的填充颜色。下面是两种常用的解决方法：

1. 使用颜色码

我们可以通过在CSS中使用颜色码来改变SVG Sprite中特定图像的填充颜色。首先，我们需要找到SVG图像在SVG Sprite文件中对应的位置。然后，我们可以使用CSS的伪类选择器nth-of-type来选择该图像。接下来，我们只需要设置该图像的fill属性为所需的颜色码，就可以改变其填充颜色了。

.icon:nth-of-type(1) {
  fill: #ff0000; /* 设置填充颜色为红色 */
}

在上面的例子中，icon是SVG Sprite中所有图像的共同类名，nth-of-type(1)选择第一个图像，fill属性设置为红色。通过修改选择器和颜色码，我们可以改变其他特定图像的填充颜色。

2. 使用CSS变量

另一种改变SVG Sprite中特定图像填充颜色的方法是使用CSS变量。CSS变量可以通过在根元素上定义，并在其他元素中引用来实现。首先，在根元素中定义一个CSS变量，例如--icon-fill-color。然后，在需要更改填充颜色的图像中，我们可以使用var()函数引用这个变量。最后，我们只需要在需要更改填充颜色的元素上，将这个CSS变量设置为所需的颜色。

:root {
  --icon-fill-color: #00ff00; /* 定义填充颜色变量为绿色 */
}

.icon {
  fill: var(--icon-fill-color); /* 通过引用变量来设置填充颜色 */
}

在上面的例子中，我们首先在根元素上定义了一个名为--icon-fill-color的变量，并将其设置为绿色。然后，我们通过在.icon类中使用var()函数来引用这个变量。这样，所有使用.icon类的SVG图像都会有相同的填充颜色。

示例

下面是一个使用上述方法改变SVG Sprite填充颜色的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon1" viewBox="0 0 24 24">
    <!-- 这里是图像的路径数据 -->
  </symbol>
  <symbol id="icon2" viewBox="0 0 24 24">
    <!-- 这里是图像的路径数据 -->
  </symbol>
</svg>

<div class="icon-wrapper">
  <svg class="icon">
    <use xlink:href="#icon1"></use>
  </svg>
  <svg class="icon">
    <use xlink:href="#icon2"></use>
  </svg>
</div>

<style>
.icon-wrapper {
  display: flex;
  justify-content: center;
}

.icon {
  width: 50px;
  height: 50px;
  fill: var(--icon-fill-color);
}
</style>

<script>
document.querySelector('.icon').style.setProperty('--icon-fill-color', '#ff0000');
</script>

在上面的示例中，我们首先使用symbol元素创建了两个图像，并分别使用id属性来标识它们。然后，在.icon-wrapper类中，我们通过使用use元素和xlink:href属性来引用这些图像。最后，我们使用CSS设置了.icon类的宽度、高度和填充颜色，并使用JavaScript来动态改变--icon-fill-color变量的值。

通过运行上述代码，我们可以看到图像的填充颜色被成功地改变了。