HTML5 SVG 2d Einführung 9 - Einführung und Anwendung von Masken und Maskenelementen

SVG unterstützt eine Vielzahl von Maskeneffekten. Mit diesen Funktionen können wir viele schillernde Effekte erzeugen. Ob Maske auf Chinesisch Maske oder Maske genannt wird, ist nicht differenziert. Es heißt hier Maske.

Die von SVG unterstützten Arten von Masken:

1. Ausschnittpfad

Ein Clipping -Pfad ist ein Diagramm, das aus Pfad, Text oder Basisdiagramm besteht. Alle Grafiken innerhalb des Clip -Pfades sind sichtbar und alle Grafiken außerhalb des Clippfads sind unsichtbar.

2. Maske/Maske

Eine Maske ist ein Behälter, der eine Reihe von Grafiken definiert und sie als durchscheinendes Medium verwendet, mit dem Vordergrundobjekte und Hintergründe kombiniert werden können.

Ein wichtiger Unterschied zwischen einem Ausschnittpfad und anderen Masken besteht darin, dass der Ausschnittpfad eine 1-Bit-Maske ist, was bedeutet, dass das vom Ausschnittpfad bedeckte Objekt entweder vollständig transparent ist (sichtbar, im Klimaanlagen) oder vollständig undurchsichtig (nicht sichtbar, außerhalb des Ausschnittpfads). Und die Maske kann Transparenz an verschiedenen Stellen angeben.

Das Überlaufattribut und das Clip -Attribut des HTML -Elements setzen das Ausschnittverhalten des Elements gemeinsam auf den Inhalt. In ähnlicher Weise können diese 2 Eigenschaften in SVG auch verwendet werden.

Das Überlaufattribut definiert das Verhalten, das genommen wird, wenn der Inhalt eines Elements den Rand des Elements überschreitet.

Diese Eigenschaft kann für Elemente (SVG, Symbol, Bild, FremdObject), Muster und Markierungselemente verwendet werden, die neue Fenster erstellen können. Der Wert dieser Eigenschaft ist wie folgt:

Sichtbar: Zeigt alle Inhalte an, auch wenn sich der Inhalt bereits außerhalb des Randes des Elements befindet, ist dies der Standardwert.

Versteckt: Inhalte über den Clipping -Pfad hinaus ausblenden. Der Clip -Pfad wird durch die Clip -Eigenschaft angegeben.

SCROLL: In Form einer Bildlaufleiste, die den Inhalt darüber hinaus präsentiert.

AUTO: Mithilfe von Browser-definiertem Verhalten scheint dies unzuverlässig zu sein.

Diese Eigenschaft entspricht im Grunde genommen der gleichen Eigenschaft in CSS2, außer dass es in SVG verschiedene Verarbeitungsverfahren gibt:

1. Das Überlaufattribut hat keinen Einfluss auf andere Elemente als die Elemente, die ein neues Fenster (SVG, Symbol, Bild, FremdObject), Muster und Marker -Elemente erzeugen.

2. Der Ausschnittpfad entspricht dem Fenster. Wenn ein neues Fenster erstellt wird, wird ein neuer Ausschnittpfad erstellt. Der Standardausschnittpfad ist die Fenstergrenze.

Die Clip -Eigenschaft wird verwendet, um den Clippfad des aktuellen Fensters einzustellen.

Diese Eigenschaft kann für Elemente (SVG, Symbol, Bild, FremdObject), Muster und Markierungselemente verwendet werden, die neue Fenster erstellen können. Diese Eigenschaft hat die gleichen Parameter wie die Eigenschaft mit demselben Namen in CSS2. Auto bedeutet, dass der Ausschnittpfad mit dem Fensterrand übereinstimmt. Bei Verwendung des Diagramms als Parameter (Festlegen der Werte von oben, rechts, unten und links im Pflanzenrechteck) kann der Benutzerkoordinatenwert (d. H. Koordinaten ohne Einheiten) verwendet werden. Zum Beispiel:

P {Clip: RECT (5px, 10px, 10px, 5px); }

Beachten Sie hier, dass der Clippfad standardmäßig (Überlauf und Clip beide Standardwerte sind) mit dem Rand des Fensters überein. Nach dem Einstellen von Viewbox und PreserveSpectratio müssen Sie normalerweise die vier Seiten des Clip -Clip -Pfades in die vier Seiten der Viewbox abbilden, um sicherzustellen, dass einige Anzeigeeffekte gleich sind (natürlich müssen Sie sie nicht festlegen, wenn es sich um Standardwerte handelt, nicht festlegen müssen).

Der Clip-Pfad wird unter Verwendung des Clippath-Elements definiert und dann mit dem Clip-PAD-Attribut verwiesen.

Clippath kann Pfadelemente, Textelemente, grundlegende grafische Elemente (Kreis usw.) enthalten und Elemente verwenden. Wenn es sich um ein Verwendungselement handelt, muss es sich direkt auf Pfad, Text oder grundlegende grafische Elemente beziehen, und andere Elemente können nicht verwiesen werden.

Beachten Sie, dass der Clipping -Pfad nur eine Maskenschicht von einem Bit ist, was eine Vereinigung aller enthaltenen Elemente ist. Objekte in dieser Sammlung können angezeigt werden, und Objekte, die sich nicht in diesem Bereich befinden, werden nicht angezeigt. Der Algorithmus mit dem spezifischen Urteilspunkt, der nicht innerhalb des Bereichs nicht im Bereich ist, wird durch das Clip-Rule-Attribut angegeben.

Für grafische Objekte ist der Clip-Pfad der Vereinigung des Clippfads, der alleine mit den Clippfaden aller äußeren Elemente festgelegt ist (einschließlich Clippfade, die von Clip-Pfad und Überlauf festgelegt sind). Ein paar Punkte zu beachten:

1. Das Clippath -Element selbst erbt nicht den Clippath -definierten Clippfad aus dem äußeren Knoten.

2. Das Clippath-Element selbst kann das Clip-Pfad-Attribut festlegen. Der Effekt ist der Schnittpunkt zweier Pfade.

3. Das Clip-Pfad-Attribut kann für die untergeordneten Elemente des Clippath-Elements festgelegt werden: Der Effekt ist eine Vereinigung von zwei Pfaden.

4. Ein leerer Ausschnittpfad schneidet alle Inhalte im Element.

Hier sind einige wichtige Attribute:

Dieses Attribut definiert das vom Clippath -Element verwendete Koordinatensystem. Wir kennen diese beiden Werte, nämlich das Benutzerkoordinatensystem, das das Element verwendet, das den aktuellen Clip -Pfad und den Proportionalwert des Begrenzungsfelds verweist.

Das Clippath-Element wird niemals direkt gerendert und über Clip-Pfad referenziert. Das Festlegen des Anzeigeattributs des Clippath-Elements hat daher keinen Einfluss.

Unnötig zu erwähnen, dass dieses Attribut verwendet wird, um sich auf den Ausschnittpfad zu beziehen. Es ist hier zu beachten, dass alle Containerelemente, grundlegenden Grafikelemente und Clippath -Elemente dieses Attribut verwenden können.

Diese Eigenschaft wird verwendet, um zu bestimmen, welche Punkte zu den Punkten innerhalb der Clipping -Kraft gehören. Dies ist leicht für einfache geschlossene Grafiken zu beurteilen, aber für komplexe Grafiken mit Löchern im Inneren gibt es einen Unterschied. Der Wert dieser Eigenschaft hat die gleiche Bedeutung wie der Wert der Füllregele:

ungleich Null: Der für diesen Wert verwendete Algorithmus besteht darin, Linien vom Punkt zu emittieren, der in eine beliebige Richtung beurteilt wird, und dann die Richtung des Schnittpunkts zwischen der Abbildung und dem Liniensegment zu berechnen; Das Berechnungsergebnis beginnt von 0, und jedes Zeilensegment an einer Kreuzung ist von links nach rechts, fügen Sie 1 hinzu; Jedes Liniensegment an einer Kreuzung ist von rechts nach links, Subtrahieren 1; Nach der Berechnung aller Schnittpunkte auf diese Weise liegt der Punkt in der Abbildung und muss gefüllt werden, wenn das Ergebnis dieser Berechnung nicht gleich 0 ist. Wenn der Wert gleich 0 ist, muss er außerhalb der Abbildung nicht gefüllt werden. Siehe das folgende Beispiel:

BEIMET: Der für diesen Wert verwendete Algorithmus besteht darin, Linien aus dem Punkt auszugeben, der in jede Richtung gerichtet werden muss, und dann die Anzahl der Punkte zu berechnen, an denen die Abbildung und der Liniensegment -Schnittpunkt. Wenn die Zahl ungerade ist, wird der Punkt in die Figur geändert und muss gefüllt werden. Wenn die Zahl gleichmäßig ist, liegt der Punkt außerhalb der Abbildung und muss nicht gefüllt werden. Siehe das Beispiel in der Abbildung unten:

Das Clip-Rule-Attribut kann nur für interne grafische Elemente des Clippath-Elements verwendet werden. Beispielsweise funktionieren die folgenden Einstellungen:

<g>

<Clippath id = "myclip">

<path d = "..." clip-role = "maineodd" />

</clippath>

<rect clip-path = "url (#myclip)" ... />

</g>

Es funktioniert nicht, wenn sich das Element nicht in Clippath befindet. Beispielsweise funktionieren die folgenden Einstellungen nicht:

<g clip-role = "ungleich Null">

<Clippath id = "myclip">

<path d = "..." />

</clippath>

<rect clip-path = "url (#myclip)" clip-role = "gireodd" ... />

</g>

Schauen wir uns schließlich ein kleines Beispiel für den Clipping -Pfad an:

<Svg>

<g>

<Clippath id = "myclip">

<Pfad d = "M 10,10 l 10,20 l 20,20 l 20,10 z" clip-role = "BEWERTE" />

</clippath>

</g>

<rect clip-path = "url (#myclip)" x = "10" y = "10" fill = "rot" />

</svg>

Nur der Bereich der oberen linken Ecke des Rechtecks ​​ist sichtbar.

In SVG können Sie dem gerenderten Objekt jedes grafische Element oder G -Element als Maske zuweisen, um das gerenderte Objekt in den Hintergrund zu kombinieren.

Die Maske wird durch das Maskenelement definiert. Bei Verwendung der Maske müssen Sie nur die Maske im Maskenattribut des Objekts verweisen.

Das Maskenelement kann jedes grafische Element und ein Containerelement (z. B.) enthalten.

In der Tat ist sich alle über die Wirkung der Maske klar. Grundsätzlich soll eine endgültige Transparenz basierend auf der Farbe und Transparenz jedes Punktes in der Maske berechnet werden. Wenn dann das Objekt rendert, wird eine Maskenschicht mit unterschiedlicher Transparenz am Objekt abgedeckt, was den Maskierungseffekt der Maske widerspiegelt. Zum Rendern von Objekten werden nur die Teile innerhalb der Maske gemäß der Transparenz der Punkte auf der Maske gerendert, und die Teile außerhalb der Maske werden nicht angezeigt. Siehe das folgende Beispiel:

<SVG ViewBox = "0 0 800 300" Version = "1.1"

xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">

<defs>

<lineargradient id = "gradient" gradientUnits = "userSpaceonuse"

x1 = "0" y1 = "0" x2 = "800" y2 = "0">

<stop offset = "0" stop-color = "White" Stopoptacity = "0" />

<stop offset = "1" stop-color = "White" Stopoptacity = "1" />

</lineargradient>

<mask id = "mask" maskunits = "UserSpaceonuse"

x = "0" y = "0">

<rect x = "0" y = "0" fill = "url (#gradient)" />

</mask>

<text id = "text" x = "400" y = "200"

font-family = "Verdana" font-size = "100" text-Anchor = "Middle">

Maskierter Text

</text>

</defs>

<!-der Hintergrund des Fensters->

<rect x = "0" y = "0" fill = "#ff8080" />

<!- ​​Der erste Schritt besteht darin, einen Text mit einer Maske zu zeichnen, und Sie können sehen, dass der Transparenzeffekt der Maske auf die Wörter angewendet wurde.

Der zweite Schritt besteht darin, einen Text ohne Maske als Umriss des Textes im ersten Schritt zu zeichnen ->

<Verwenden Sie XLink: href = "#text" fill = "blau" mask = "url (#mask)" />

<Verwenden Sie XLink: href = "#text" fill = "none" stroke = "schwarz" stroke-width = "2" />

</svg>

Der Effekt ist in der folgenden Abbildung dargestellt:

Sie können versuchen, die Breite des rechte Elements im obigen Maskenelement auf 500 zu ändern. Sie werden feststellen, dass ein Teil des Textes nicht angezeigt wird, da dieser Teil den Umfang der Maske überschritten hat. Wie Sie hier tatsächlich sehen können, ist der Überschnittspfad oben nur eine spezielle Maske (die Transparenz jedes Punktes beträgt entweder 0 oder 1).

Die Definition und Verwendung von Masken wurde eingeführt. Schauen wir uns mehrere wichtige Attribute an:

Ein Koordinatensystem, das Koordinaten (x, y) und Länge (Breite, Höhe) in einem Maskenelement definiert: ein Benutzerkoordinatensystem, das sich auf das Element der Maske bezieht, oder einen relativen Wert des Begrenzungsfelds relativ zum Element der referenzierten Maske. Die Bedeutung dieses Wertes ist die gleiche wie die Einheit -Bedeutung im vorherigen Kapitel.

Definiert das Koordinatensystem von untergeordneten Elementen im Maskenelement.

Die Position und Größe der Maske werden definiert. Unter den Standard -ObjectBoundingbox -Koordinaten betragen die Standardwerte -10%, -10%, 120%und 120%.

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/