Ist es ein Gecko entspricht -webkit-Maske oder eine andere Art erniedrigender für Gecko-Browser?

Nach kämpfen mit diesem für viele Stunden, ich war schließlich in der Lage anzuwenden, eine komplexe SVG-Pfad als Maske für ein div-element auf meiner Seite, und es funktioniert in Firefox. Hier ist, was ich getan habe:

Erste, der für Webkit-Browser, die Lösung war ideal, und ich musste das einfach machen, eine abgeflachte png-Datei mit der gleichen Größe (oder wirklich die gleiche Form, unterschiedlicher könnten-Skala) als die div, die ich maskieren möchten, und mit der Gegend, in der ich sichtbar sein sollen, in schwarz, und die Teile, die ich möchte, ausgeschnitten, transparent. Dann habe ich noch die folgende Zeile in die CSS für das div-element, ich will Maske:

-webkit-mask-box-image: url(path/to/mask.png);

Einfach ist das! Jetzt kommen wir zum lustigen Teil dieser arbeiten in Firefox. Für diese Methode funktioniert, muss der Vektor-Form sein müssen, die genau dieselbe Größe wie der Bereich, den Sie maskieren möchten. Also meine Maske ist eine relativ komplexe Vektor-Pfad entwickelt, in Fireworks, und ich brauche, um es in einen SVG-Pfad und zum Glück, ich habe in Illustrator zur Verfügung. Andernfalls verwenden Sie Ihren bevorzugten editor für SVG-Vektorgrafiken zu konvertieren Sie Ihre Form, die path SVG-Format. Wenn Sie auch mit Fireworks zu zeichnen, Vektor-Formen, Sie können mit der rechten Maustaste auf den Vektor-Form, die Sie verwenden möchten, gehen Sie zu "Bearbeiten" - > 'Pfad Kopieren Umrisse', und dann Sie können fügen Sie es in ein ausreichend großes Dokument in Illustrator, oder was auch immer SVG-editor, die Sie verwenden.

Nächste, die Sie brauchen, um es zu exportieren, um eine SVG-Datei. In Illustrator habe ich die 'für Web Exportieren' - Funktion, ausgewählte SVG-format, version 1.0, und exportiert es in eine SVG-Datei. Die position und Größe der Dokumente nicht wirklich Materie, als wir gerade nach dem Weg Beschreibung, und wir verwerfen den rest.

So, jetzt öffnen, das SVG-Datei, die Sie gerade gemacht, mit einem text-editor, wie z.B. Text Edit oder Notepad. Sie werden sehen, dass einige XHTML-formatierte Inhalte, und ein element ist insbesondere so etwas wie:

<path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>

Den d="..." Teil wird wohl viele Zeilen lang ist, eine komplexe Form. Dies ist der einzige Teil dieser SVG-Datei, wir kümmern uns darum.

Als Nächstes müssen wir das einbetten einer SVG-Maske beschreibt diesen Weg in unserer Website, HTML. Erste, lassen Sie ' s fügen Sie die folgenden Elemente, um unsere HTML:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="maskid" maskUnits="userSpaceOnUse"> 
            <path fill="white" d=""/>
        </mask>
    </defs>
</svg>

Nun, wir kopieren einfach den Inhalt der d="" Eigenschaft der Pfad-element aus der SVG-Datei, die wir zuvor gespeichert haben (d.h. M0,43v0...) und fügen Sie in der gleichen d="" Eigenschaft der Pfad-element im eingebetteten SVG-Maske-element. Dann können wir den folgenden Eintrag hinzufügen der CSS-Code für das element, das wir wollen, Maske:

mask: url("#maskid");

Das ist es. Der Pfad sollte nun angewendet werden, wie eine Maske, um das element, das Sie angegeben haben.

Können Sie anwenden, svg-Filter, mit css HTML-Inhalte in Gecko. Hier ist ein Beispiel von einem Typ, der gerne Geige mit mozilla-code. Es ist von 2008, es kann also ein bisschen veraltet.