Question

我尝试使用SVG在Firefox中屏蔽图像。图像是响应式的，因此面具也应该响应。

使用简单的SVG圆掩码和属性maskUnits="objectBoundingBox"和maskContentUnits="objectBoundingBox"，SVG掩码按预期工作。请参阅此fiddle。

但是当我从Illustrator导出路径并将其包含在与简单的SVG圆形蒙版相同的方式时，它不起作用。当我删除maskUnits="objectBoundingBox"和maskContentUnits="objectBoundingBox"属性时，图像会被屏蔽，但不会响应。请参阅此fiddle。

我尝试将viewbox属性与Illustrator一起使用，以获得响应能力，但不会这样做。

那些知道如何让那个反复的SVG图像蒙版工作的人？

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

如果您有任何问题，请与我们联系。

无法在Firefox中使用响应式SVG图像掩码

1 个答案: