Nicht in der Lage, eine responsive SVG-Bildmaske in Firefox

Question

zu arbeiten Ich versuche, ein Bild in Firefox mit SVG zu maskieren. Das Bild reagiert, daher sollte die Maske auch reagieren.

Mit einer einfachen SVG-Kreismaske und den Attributen maskUnits="objectBoundingBox" und maskContentUnits="objectBoundingBox" funktioniert die SVG-Maske wie erwartet. Siehe hierzu fiddle.

Aber wenn ich meinen Pfad aus Illustrator exportiere und ihn wie die einfache SVG-Kreismaske einfüge, funktioniert es nicht. Wenn ich die Attribute maskUnits="objectBoundingBox" und maskContentUnits="objectBoundingBox" entferne, wird das Bild maskiert, reagiert jedoch nicht. Siehe hierzu fiddle.

Ich versuche, das viewbox Attribut Illustrator mit zu arbeiten, um Reaktionsfähigkeit zurück zu bekommen, aber das wird es nicht tun.

Wer weiß, wie man diese Reponsive SVG-Image-Maske zum Laufen bringt?

Ich verwende aktuelle Firefox 45.0.2 auf OSX. Vielen Dank!

Answer 1

bitte versuchen Sie dies fiddle, obwohl ich meinen Rechner nur auf squared SVGs getestet (Höhe = Breite), aber wenn ich die höchste Dimension Wert in Ihrem Fall 800px versucht gut es funktionierte.

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

Bitte lassen Sie mich wissen, wenn Sie Problem haben.