無法獲得響應式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中工作

回答

相關問題