html - SVG 不使用类颜色？

Question

更改正在使用的 SVG 文件的颜色时出现问题。

我一直在尝试使用 CSS 样式更改我正在使用的 SVG 文件，但似乎无法使其工作..

HTML:

<div class="svg--white" style="width: 100px; height: 100px;  position: absolute; top: 30%; left: 40%;">
<svg>
<use xlink:href="#public--play"></use>
</svg>
</div>

CSS:

.svg{

    &--white {
      color: white;
      fill: white;
    }
}

SVG 一直显示为白色，尽管样式应将其标记为白色。我不确定我是否理解这是怎么回事。

我似乎无法改变颜色？

Answer 1

您的 SVG 中需要一些可以应用 fill 的形状。

将 fill 给 SVG 的父容器是没有问题的。看我的例子。由于样式的级联性质，没有填充的圆圈会得到蓝色填充:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  fill: blue;
}

<section id="container">
  <svg class="example-svg" width='300px' height='300px'>
    <circle cx='50%' cy='50%' r='110'></circle>
    <circle cx='50%' cy='50%' r='90' fill="hsl(0, 100%, 50%)"></circle>
    <circle cx='50%' cy='50%' r='70' fill="hsl(20, 100%, 50%)"></circle>
    <circle cx='50%' cy='50%' r='50' fill="hsl(40, 100%, 50%)"></circle>
    <circle cx='50%' cy='50%' r='30' fill="hsl(60, 100%, 50%)"></circle>
  </svg>
<section>