修改背景图像中的颜色 svg (VueJS)

Question

我需要更改 svg 中图像的颜色，问题是它在组件的 css 样式中作为背景图像出现。

模板Vue：

<div class="circle">
...
</div>

类 CSS：

.circle {
  position: absolute;
  background-image: url("~@/assets/images/home/circle.svg");
  border-radius: 100%;
  transition: all 0.3s ease-in-out, width 0.5s 0.1s;
}

Answer 1

这是您如何做到的。 使用 IDE 编辑图像文件 (circle.svg)。 在 css 中查找要更改的颜色。 将该颜色值（ fill ）更改为currentColor关键字。

.circle {
  position: absolute;
  background-image: url("~@/assets/images/home/circle.svg");
  border-radius: 100%;
  transition: all 0.3s ease-in-out, width 0.5s 0.1s;
  color: red; // the currentColor in svg will reflect this color property
}