css svg修改颜色

CSS SVG修改颜色是一种常见的技巧，可以在不改变SVG形状的情况下改变其外观。下面我们将介绍如何使用CSS对SVG进行颜色修改。

首先，需要在SVG代码中添加CSS类名，例如：

  <svg class="icon">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M4 4v16h16V4H4zm2 ...
  </svg>

然后，在CSS样式表中定义类名和颜色：

  .icon {
    fill: #000000;
  }

这将把所有的SVG路径颜色设置为黑色。如果要更改特定的SVG路径的颜色，可以在CSS样式表中添加路径选择器，例如：

  .icon path:nth-child(2) {
    fill: #ffffff;
  }

这将把第二个SVG路径的颜色设置为白色。

另外，还可以使用CSS伪类修改SVG路径的颜色。例如，当鼠标悬停在SVG上时，可以使用:hover伪类将路径颜色更改为红色：

  .icon:hover path {
    fill: #ff0000;
  }

这将把鼠标悬停在SVG上时的所有路径的颜色设置为红色。

总之，CSS SVG修改颜色是一种方便且有用的技术，可以帮助我们更好地控制SVG图像的外观和设计。