如何在web里，将svg图标从黑色改成白色？

Question

我下载了一大堆svg图标，都是黑色的，也不想再重新下载了，需要把他们改成白色填充。
我一开始是尝试

svg > path {
  fill: white;
  color: white;
}

在浏览器inspector发现，整个方块变白了。
原因似乎是，每个svg除了图案本身path，还有一个外框path。我从各个icon站点下载下来的都是这样，

正确的修改方式是什么？
若是多彩svg图标，这种情况要怎么特殊处理？

Answer 1

回答不易，求求您采纳点赞哦

一种方法是使用 CSS 设置颜色:

svg path {
  fill: white;
}

如果是多彩的 SVG 图标，可以通过在 CSS 中指定特定 path 的颜色进行控制:

svg path.icon-part-1 {
  fill: white;
}

svg path.icon-part-2 {
  fill: red;
}

在 SVG 代码中，需要添加 class 属性:

<svg>
  <path class="icon-part-1" ... />
  <path class="icon-part-2" ... />
</svg>