Die Verwendung von -Elementen in SVG und die Einführung von Markierungsattributen

Die mit SVG gezeichneten Grafiken sind Pfeile, die in definiert und dann wiederverwendet werden können, aber Sie müssen sie jedes Mal verschieben oder drehen, wenn Sie sie anwenden. Es wäre viel praktischer, ein -Element direkt zu verwenden.

Element

Ein Marker ist ein Element, das die Eckpunkte eines oder mehrerer Pfade, Linien, Polylinien usw. verbinden kann Polygone Flaggentyp. Der häufigste Anwendungsfall ist das Zeichnen von Pfeilen oder das Markieren einer (Polymarker-)Grafik auf der Zeile des Ausgabeergebnisses.
Verwenden Sie das -Element, um eine Markierung und die zugehörigen Attribute zu erstellen. Normalerweise platzieren wir die Markierung im -Element und verweisen dann an anderer Stelle darauf. Lassen Sie uns anhand eines einfachen Beispiels lernen.

<svg width="600px" height="100px"> 
    <defs> 
    <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> 
    </marker>
    </defs> 
    <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>

Markereigenschaften

Die Eigenschaften markerWidth und markerHeight definieren die Breite und Höhe des Markerfensters.

Im obigen Beispiel habe ich sowohl markerWidth als auch markerHeight auf 10 Pixel gesetzt. Das im Pfad gezeichnete Dreieck muss in den 9 x 6 Pixel großen Bereich passen, daher kann ich auch markerWidth auf 9 und markerHeight auf 6 setzen. Dies ist die Mindestgröße, die der Marker akzeptieren kann. Jede kleinere Größe führt dazu, dass die Grafik beschnitten wird.
Die nächsten beiden Attribute refX und refY beziehen sich auf die Positionskoordinaten der Verbindung zwischen dem Grafikelement und dem Marker. Wir haben auch eine Transformation auf die Szene dahinter angewendet, um die Markierung zu verschieben und an ihr auszurichten.

Das nächste Attribut ist die Ausrichtung. Dieses Attribut ist der Grund, warum ich die Markierung beim Konvertieren der Richtung der Linie nicht anpassen muss. Es akzeptiert einen Auto-Wert oder einen Winkelwert, der bestimmt, ob die Markierung gedreht werden soll, wenn sie mit anderen Inhalten verbunden wird.

auto Dieser Wert bedeutet, dass sich der Marker mit den angewendeten Elementen dreht. Der Wert 45 Grad bedeutet, dass die Richtung der Markierung immer 45 Grad beträgt und sich nicht mit den verbundenen Elementen dreht. Meistens ist dieser Wert auf „Auto“ eingestellt.

Das letzte Attribut ist markerUNits, mit dem bestimmt wird, ob der Marker skaliert ist. Es definiert markerWidth und markerHeight sowie das Koordinatensystem des Markerinhalts selbst.

Es akzeptiert zwei Werte: StrokeWidth und UserSpaceOnUse. Der Standardwert ist „StrokeWidth“, den Sie in den meisten Fällen festlegen werden, da er die Skalierung Ihres Markers mit der Linie ermöglicht, mit der er verbunden ist.

StrokeWidth: Der Markierungswert im Koordinatensystem und die Einheit der aktuellen Strichbreite sind gleich groß. Mit anderen Worten: Der Wert „StrokeWidth“ ermöglicht die Skalierung Ihrer Markierung.
userSpaceOnUse: Der Wert von marker ist der Wert des aktuellen Benutzerkoordinatensystems. Das heißt, wenn Ihr Marker ein Kreis mit einem Radius von 10 Pixeln ist, hat er immer einen Radius von 10 Pixeln, unabhängig von den verbundenen Elementen.

Markierungsfunktion – Referenzierung der Markierung im Element

marker-end="url(#arrow)”

Es gibt vier Möglichkeiten, Markierungen auf grundlegende Grafiken wie Linie, Pfad, Polylinie und Polygon anzuwenden:

• marker-start=“url(#marker-id)“

• marker-mid=“url(#marker-id)“

• marker-end=“url(#marker-id)“

• marker=“url(#marker-id)“

Empfohlene verwandte Artikel:

Wie SVG die Koordinatensystemtransformation implementiert (mit Code)

Eine Zusammenfassung verschiedener Methoden zur Verwendung von SVG in React (mit Code). )

Das obige ist der detaillierte Inhalt vonDie Verwendung von -Elementen in SVG und die Einführung von Markierungsattributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!