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

我尝试在Firefox中使用SVG蒙蔽图像。图像是敏感的，所以面具也应该有反应。无法获得响应式SVG图像蒙版在Firefox中工作

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

但是，当我从Illustrator中导出我的路径并将其与简单SVG圆圈蒙版一样包含它时，它不起作用。当我删除maskUnits="objectBoundingBox"和maskContentUnits="objectBoundingBox"属性时，图像被遮罩，但没有响应。看到这个fiddle。

我尝试包括Illustrator工作的viewbox属性，以获得响应能力，但不会这样做。

任何人都知道如何获得响应式SVG图像蒙版的工作？

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

来源

2016-04-26 Thomas

没有想法？请... – Thomas

请尽量将fiddle，虽然我只测试我的计算器上平方SVGs（高度=宽度），但是当我在你的情况下，尝试800像素最高的尺寸值，效果不错。

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

请让我知道如果你有任何问题。

来源

2016-05-01 04:10:27 ProllyGeek

谢谢，ProllyGeek。这个Testcase可以和你的计算器很好地协作。但是，当我使用更复杂的蒙版（即SVG路径中有一些NaN）时，即使使用平方SVG，它也不起作用。这是[原始掩码]（https://jsfiddle.net/hrfvqcwL/17/），是否有机会通过计算器？ – Thomas

@Thomasz有趣的我会研究这个bug并修复它，我希望，也许我应该上传代码给github，并让人们来帮助它。 – ProllyGeek

你有什么消息吗？我认为当你使用计算器时你会用计算器拯救生命！感谢您的所有努力。 – Thomas

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

回答

相关问题