Не в состоянии изменить цвет SVG, заливки и обводки - PullRequest
Новая
       54

Не в состоянии изменить цвет SVG, заливки и обводки

0 голосов
/ 29 января 2019

Я хочу сделать свой SVG полностью белым, но не могу этого сделать

https://jsfiddle.net/0Lpewkc1/1/

По какой-то причине застрял черный цвет?Но почему? 

@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%;
}

1 Ответ

0 голосов
/ 29 января 2019

Вам нужно нацелиться на 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>
...