无法让响应式 SVG 图像蒙版在 Firefox 中工作

Question

我尝试使用 SVG 屏蔽 Firefox 中的图像。图片是响应式的，所以遮罩也应该是响应式的。

使用简单的 SVG 圆形遮罩和 maskUnits="objectBoundingBox" 和 maskContentUnits="objectBoundingBox" 属性，SVG 遮罩可以按预期工作。看到这个fiddle。

但是当我从 Illustrator 导出路径并以与简单 SVG 圆形蒙版相同的方式包含它时，它不起作用。 当我删除 maskUnits="objectBoundingBox" 和 maskContentUnits="objectBoundingBox" 属性时，图像被屏蔽，但没有响应。看到这个fiddle。

我尝试包含 Illustrator 使用的 viewbox 属性，以恢复响应能力，但这样做不会。

有谁知道如何让响应式 SVG 图像蒙版工作？

我在 OSX 上使用当前的 Firefox 45.0.2。谢谢！

Answer 1

请试试这个 fiddle，虽然我只在平方 SVG（高度=宽度）上测试了我的计算器，但是当我在你的案例中尝试最高尺寸值 800px 时，它运行良好。 p>

HTML：

<svg height="0" viewBox="0 0 800 500">
  <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <path d="M0,0.05C0.03375,0.03,0.08625,0.00625,0.15125,0.0025,0.25375-0.0025,0.27375,0.04625,0.3775,0.04875c0.12125,0.0025,0.15-0.065,0.25375-0.0425,0.06125,0.0125,0.0675,0.04125,0.12625,0.055C0.84625,0.08375,0.9325,0.0425,0.99875,0V0.625L0,0.625V0.05Z" style="fill:white"/>
  </mask>
</svg>
<img src="https://placebear.com/800/500" id="test" alt="">

CSS：

#test { width: 100%; height: auto; mask: url(#m1); }

如果您有任何问题，请告诉我。