CSS中引用svg图片支持动态切换颜色的实现代码

来一步步讲解CSS中引用svg图片支持动态切换颜色的实现代码的完整攻略。

1.准备svg图片

首先，我们需要准备好一张svg图片。这里有一个示例的svg图片：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z"/>
</svg>

上述代码是一个带有一个圆形填充的svg图片，fill属性设置为了currentColor，表示使用当前元素的颜色作为填充色。

2.引用svg图片

接下来，在网页中引用这张svg图片。可以使用<img>标签或background-image来引用，这里我们选用<img>标签，代码如下：

<img src="path/to/your/svg" alt="svg image" class="svg-icon">

需要注意的是，class属性设置为svg-icon，这是为了后面方便控制样式。

3.切换颜色

现在我们已经成功引用了svg图片，接下来是实现颜色切换的关键部分。

首先，在CSS中定义颜色：

.icon-red {
  color: red;
}
.icon-blue {
  color: blue;
}

我们定义了两种不同的颜色，分别为红色和蓝色。

接下来，我们利用CSS的filter属性来设置颜色：

.svg-icon {
  filter: brightness(0) invert(1);
}
.svg-icon.icon-red {
  filter: brightness(0) invert(1) sepia(1) hue-rotate(-30deg) saturate(2);
}
.svg-icon.icon-blue {
  filter: brightness(0) invert(1) sepia(1) hue-rotate(50deg) saturate(3);
}

解释一下上述代码：

• filter: brightness(0) invert(1);表示对图片进行反色处理。
• .svg-icon.icon-red表示选择.svg-icon这个类中，又加上.icon-red这个类的元素，即标签内同时包含这两个类的元素。
• sepia()函数是一种基于褐色的单色效果。
• hue-rotate()是一个函数，用于旋转图像的色相，正值表示顺时针旋转，负值表示逆时针旋转，单位为度数。
• saturate()函数用于设置图像的饱和度，值越大饱和度越高。

这样，我们就实现了根据不同的类名切换颜色的效果。我们可以在页面上添加按钮或者下拉菜单，实现用户选择颜色并切换的功能。

4.示例说明

这里再给出两个示例说明：

示例1 - 带有背景色的按钮

假设我们有一个按钮，希望按钮的背景色可以动态切换。可以使用下列代码实现：

<button class="btn btn-red">Red</button>
<button class="btn btn-blue">Blue</button>

.btn {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}
.btn-red {
  background-color: red;
}
.btn-blue {
  background-color: blue;
}
.btn svg {
  position: relative;
  top: 3px;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  fill: white;
}

.btn-red svg {
  filter: brightness(0) invert(1) sepia(1) hue-rotate(-30deg) saturate(2);
}

.btn-blue svg {
  filter: brightness(0) invert(1) sepia(1) hue-rotate(50deg) saturate(3);
}

在这个示例中，我们将svg图片嵌入到按钮中，并根据不同的类名切换了按钮的背景色和svg颜色。

示例2 - 带有下拉菜单的导航栏

假设我们有一个导航栏，希望其中一个菜单可以动态切换颜色。可以使用下列代码实现：

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="nav-item-with-color">
    <a href="#" class="nav-item-title">Products</a>
    <ul class="dropdown-menu">
      <li><a href="#">Product 1</a></li>
      <li><a href="#">Product 2</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

.nav {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
}

.nav li {
  flex: 1;
}

.nav li a {
  display: block;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 12px;
}

.nav-item-with-color {
  position: relative;
}

.nav-item-with-color .dropdown-menu:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: #fff;
}

.nav-item-title {
  position: relative;
  display: inline-block;
}

.nav-item-title svg {
  position: absolute;
  top: 3px;
  margin-right: 5px;
  width: 20px;
  height: 20px;
}

.nav-item-title.icon-red svg {
  filter: brightness(0) invert(1) sepia(1) hue-rotate(-30deg) saturate(2);
}

.nav-item-title.icon-blue svg {
  filter: brightness(0) invert(1) sepia(1) hue-rotate(50deg) saturate(3);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
}

.nav-item-with-color:hover .dropdown-menu {
  display: block;
}

在这个示例中，我们使用一个下拉菜单来切换颜色，当用户悬停在“Products”菜单上时，会显示出下拉菜单。与示例1类似，我们将svg图片嵌入到菜单标题中，并根据不同的类名切换了标题的svg颜色。