html - CSS:Firefox 上的 -webkit-mask-image

Question

我找到了一个开源元素，我曾考虑将其用于我的网站，但该元素已失效，并且不完全跨浏览器兼容。作为网络开发人员菜鸟，我对如何修复它感到困惑。问题在于 -webkit-mask-image，根据 MDN，它是非标准的，因此在 Firefox 上不受支持。

Here是github上的元素和here是代码的现场演示。

问题出在页面导航上。具体来说，这是有问题的代码块。这在 Chrome 和 Safari 上运行良好。不适用于 Firefox。

<button id="btn1" class="active" data-vin="view-home">
    <div class="btn-icon" style="-webkit-mask-image:url(img/icons/user.svg);"></div>
    <div class="label">Home</div>
</button>

有什么想法可以修改它以在 Firefox 上运行吗？我在 MDN 上看到有关掩码和掩码图像的文档。我认为这是答案，但我无法让它正常工作。

预先感谢您的帮助。

Answer 1

无需 CSS 屏蔽且无需更改图像即可获得相同的外观。这些图像是 SVG，因此如果您在浏览器中打开它们并查看源代码，您将获得 SVG 代码:

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-374.2178,-62.2364)">
      <path d="m775.103,428.4798c-67.1319,-24.4562 -88.5923,-45.0996 -88.5923,-89.3004 0,-26.526 21.9961,-43.717 29.4945,-66.4511 7.4984,-22.7341 11.8362,-49.6496 15.4417,-69.2289 3.6055,-19.5793 5.0383,-27.1523 6.9992,-48.0136 2.3966,-26.0357 -15.0332,-93.2494 -108.2281,-93.2494 -93.1677,0 -110.6519,67.2136 -108.2009,93.2494 1.9609,20.8613 3.4014,28.4349 6.9992,48.0136 3.5978,19.5788 7.8935,46.4934 15.3872,69.2289 7.4937,22.7355 29.5217,39.9251 29.5217,66.4511 0,44.2009 -21.4604,64.8443 -88.5923,89.3004 -67.377,24.5106 -111.1149,48.6808 -111.1149,65.7566 0,17.0485 0,80 0,80l512,0c0,0 0,-62.9515 0,-80 0,-17.0485 -43.7651,-41.2187 -111.1148,-65.7566z"
      />
    </g>
</svg>

要跨浏览器工作，您现在可以将该代码插入按钮并使用 fill CSS 属性为其着色。

例子

button {
  border: none;
  background: none;
  height: 64px;
  width: 64px;
  fill: #6F6F74;
  outline: none;
}
button.selected svg {
  fill: #318CFA;
}
button:hover svg {
  fill: red;
}

<button id="btn1" class="active selected" data-vin="view-home">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-374.2178,-62.2364)">
      <path d="m775.103,428.4798c-67.1319,-24.4562 -88.5923,-45.0996 -88.5923,-89.3004 0,-26.526 21.9961,-43.717 29.4945,-66.4511 7.4984,-22.7341 11.8362,-49.6496 15.4417,-69.2289 3.6055,-19.5793 5.0383,-27.1523 6.9992,-48.0136 2.3966,-26.0357 -15.0332,-93.2494 -108.2281,-93.2494 -93.1677,0 -110.6519,67.2136 -108.2009,93.2494 1.9609,20.8613 3.4014,28.4349 6.9992,48.0136 3.5978,19.5788 7.8935,46.4934 15.3872,69.2289 7.4937,22.7355 29.5217,39.9251 29.5217,66.4511 0,44.2009 -21.4604,64.8443 -88.5923,89.3004 -67.377,24.5106 -111.1149,48.6808 -111.1149,65.7566 0,17.0485 0,80 0,80l512,0c0,0 0,-62.9515 0,-80 0,-17.0485 -43.7651,-41.2187 -111.1148,-65.7566z"
      />
    </g>
  </svg>
  Selected
</button>

<button id="btn1" class="active" data-vin="view-home">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-374.2178,-62.2364)">
      <path d="m775.103,428.4798c-67.1319,-24.4562 -88.5923,-45.0996 -88.5923,-89.3004 0,-26.526 21.9961,-43.717 29.4945,-66.4511 7.4984,-22.7341 11.8362,-49.6496 15.4417,-69.2289 3.6055,-19.5793 5.0383,-27.1523 6.9992,-48.0136 2.3966,-26.0357 -15.0332,-93.2494 -108.2281,-93.2494 -93.1677,0 -110.6519,67.2136 -108.2009,93.2494 1.9609,20.8613 3.4014,28.4349 6.9992,48.0136 3.5978,19.5788 7.8935,46.4934 15.3872,69.2289 7.4937,22.7355 29.5217,39.9251 29.5217,66.4511 0,44.2009 -21.4604,64.8443 -88.5923,89.3004 -67.377,24.5106 -111.1149,48.6808 -111.1149,65.7566 0,17.0485 0,80 0,80l512,0c0,0 0,-62.9515 0,-80 0,-17.0485 -43.7651,-41.2187 -111.1148,-65.7566z"
      />
    </g>
  </svg>
  Not selected
</button>