Question

我为我的图片添加了一个遮罩，可以在Chrome和Safari中正常使用（通过-webkit-mask-box-image）。

我为Firefox添加了一个正常工作并正常显示的内容，如下所示：

<img src="assets/images/1.jpg" class="mask">

它的CSS是这样的：

.mask {
  clip-path: url(masks/mask.svg#mask);
}

掩码SVG是这样的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="718" height="718" viewBox="0 0 718 718">
  <clipPath id="mask">
  <path d="M718.004,358.999 C718.004,160.726 557.272,-0.007 358.998,-0.007 C160.725,-0.007 -0.007,160.726 -0.007,358.999 C-0.007,557.272 160.725,718.005 358.998,718.005 C557.272,718.005 718.004,557.272 718.004,358.999 Z"/>
  </clipPath>
</svg>

我尝试了几个关于在Firefox中使掩码响应的教程和示例（通过将width和height设置为0并添加maskUnits =“objectBoundingBox”），但我没有运气。

有人对可能出错的地方有什么建议或建议吗？

响应式SVG Firefox

0 个答案: