html - CSS mask-image が no-repeat で機能しないのはなぜですか?

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>

これはバグですか？解決策は何ですか？