Почему CSS-изображение маски не работает без повтора?

Question

У меня есть SVG, и я хотел бы изменить его цвет на красный на некоторых мероприятиях, но вы не можете сделать это с SVG в качестве фонового изображения, поэтому вы должны использовать CSS image-mask. Я использую PHP, чтобы отобразить мой CSS в атрибуте стиля div:

$jfid = "background-color:red;
        -webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg);
         mask-image:url(../like_icons/" . $iconfgg . ".svg)"; 

Как

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts{
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask-image:url(https://svgshare.com/i/CB7.svg);
  mask-image:url(https://svgshare.com/i/CB7.svg) 
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

Это работает, как и ожидалось, но возвращает повторное изображение того же SVG. Таким образом, решение было бы добавить no-repeat, наконец, так:

$jfid = "background-color:red;
         -webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat;
         mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat"; 

Это в свою очередь дает мне div, полный красного цвета, и вы не можете видеть значок как

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts{
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat;
  mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

Это ошибка? Какое может быть решение?

Answer 1

no-repeat не является допустимой командой для атрибута mask-image, как видно из документации . Вместо этого вы должны использовать атрибут mask-repeat примерно так:

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts {
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask-image: url(https://svgshare.com/i/CB7.svg);
  mask-image: url(https://svgshare.com/i/CB7.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>

В противном случае вы можете использовать mask атрибут сокращение:

.buttonlikee {
    background: transparent;
    outline: none;
    border: none;
    margin-left: 10px;
    transition: 0.8s all ease
}
.ts {
  width: 34px;
  height: 32px;
  background-color:red;
  -webkit-mask: url(https://svgshare.com/i/CB7.svg) no-repeat;
  mask: url(https://svgshare.com/i/CB7.svg) no-repeat;
}

<button class="buttonlikee">
  <div class="ts"></div>
</button>