Question

我想使我的SVG完全变白，但似乎无法做到这一点

由于某种原因，黑色被卡住了吗？但是为什么呢？

@mixin test( $setSize: $size, $Fill: $Fill, $Stroke: $Stroke, ) {
  height: $setSize;
  width: $setSize;
  & use,
  & svg {
    stroke: $Stroke;
    fill: $Fill;
    width: 100%;
    height: 100%;
  }
}

.play {
  test(rem(45), white, white)
}

<div class="wrap">
  <div class="play">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512" width="100%" height="100%">
      <path d="M106.667 81.467v48L360.533 256l-211.2 11s.133v-236.8l-42.666-23.466v330.666s
450.133 256 106.667 71.467z" fill="#192228"></path></svg>
  </div>
</div>

从浏览器

play {
    height: 2.875rem;
    width: 2.875rem;
}

.play use, .play svg {
    stroke: #fff;
    fill: #fff;
    width: 100%;
    height: 100%;
}

Answer 1

您需要定位svg path，因为这就是您要更改其填充内容的原因。

更新了fiddle

@mixin test( $setSize: $size, $Fill: $Fill, $Stroke: $Stroke, ) {
  height: $setSize;
  width: $setSize;
  & use,
  & svg path { // <-- Update this
    stroke: $Stroke;
    fill: $Fill;
    width: 100%;
    height: 100%;
  }
}

.play {
  @include test(rem(45), red, white)
}

HTML：

<div class="wrap">
<div class="play">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512" width="100%" height="100%"><path d="M106.667 81.467v48L360.533 256l-211.2 11s.133v-236.8l-42.666-23.466v330.666s
450.133 256 106.667 71.467z" fill="#192228"></path></svg>
</div>
</div>

无法更改svg颜色，填充和描边

1 个答案: