css - 无法获得响应式 SVG 图像掩码以在 Firefox 中工作

Question

我尝试用 SVG 屏蔽 Firefox 中的图像。图像是响应式的，因此蒙版也应该是响应式的。

使用简单的 SVG 圆形蒙版和属性 maskUnits="objectBoundingBox" 和 maskContentUnits="objectBoundingBox"，SVG 蒙版按预期工作。看这个fiddle .

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

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

有人知道如何让响应式 SVG 图像 mask 发挥作用吗？

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

Answer 1

请试试这个 fiddle ，虽然我只在方形 SVG(高度 = 宽度)上测试了我的计算器，但是当我在你的情况下尝试最高尺寸值 800px 时它运行良好。

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); }

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