Css 响应型SVG Firefox

我在我的图像中添加了一个面具，该面具在Chrome和Safari via-webkit面具盒图像中正常工作

我为Firefox添加了一个可以正常工作和显示的浏览器，如下所示：

<img src="assets/images/1.jpg" class="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>

我尝试了以下几个教程和示例，通过将宽度和高度设置为0并添加maskUnits=objectBoundingBox，在Firefox中使掩码响应，但我没有任何运气

---

有人对可能出现的问题有什么建议吗

你确定url是正确的吗？url../masks/mask.svgmask；是的，这是因为面具功能正常，只是没有反应。在本例中，我添加了mask，因为原始名称使用的是我的母语。要清楚，如果需要，您是将非webkit前缀CSS包含在本版本中还是将-moz版本包含在本版本中？Rob，我不能100%确定我是否理解您，因为这是我第一次使用SVG。这是完整的CSS：。掩码{-webkit掩码框图像：url'masks/custom1.svg'；掩码边框：url'masks/custom1.svg'；剪辑路径：urlmasks/custom1.svgcustom1；}它可以正常显示，但唯一的问题是响应性

<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>