SVG <marker> Marke

SVG-Tags werden für den Anfang, die Mitte und das Ende von Zeilen oder Pfaden verwendet. Zum Beispiel kann der Anfang eines Pfadlabels mit einem Kreis oder einem Quadrat und das Ende eines Pfadlabels mit einer Pfeilmarke dargestellt werden. Das marker-Element definiert die Pfeil- oder Mehrseitigen-Label-Grafiken, die auf spezifischen <path>-, <line>-, <polyline>- oder <polygon>-Elementen gezeichnet werden

Marker Online-Beispiel

Dies ist ein einfaches visuelles Beispiel zur Darstellung des Aussehens der Marken:

Marken werden mit dem <marker>-Element erstellt. Das <marker>-Element muss in einem <defs>-Element enthalten sein. Das <defs>-Element reserviert in der Regel eine Gruppe wiederverwendbarer Definitionen für SVG-Bilder.
Dies ist der SVG-Code für das obige Beispiel:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"></circle>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,11　L10,6　L2,2" style="fill: #000000;"></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,10　L150,10　L150,60" style="stroke: #6666ff; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　">/path>
</svg>

Bitte beachten Sie, dass der <defs> zwei <marker>-Elemente enthält. Diese zwei <marker>-Elemente definieren die Anfangs- und Endmarken, die im obigen Bild angezeigt werden.
Zweitens, beachten Sie, wie das Element <path> das mark verwendet-start und marker-Die CSS-Attribute 'start' und 'end' beziehen sich von ihrem Style-Attribut auf zwei <mark>-Elemente. Dies ist die Methode, um für einen bestimmten Pfad die zu verwendenden Markierungen zu spezifizieren. Ich werde später noch auf dieses Thema eingehen.

Markierung definieren

Sie können das Element <marker> verwenden, um Markierungen zu definieren. Hier ist ein Beispiel:

<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
</marker>

In diesem Beispiel wird eine Breite von8(markerWidth=“8) und einer Höhe von8(markerHeight=“8) markierte. Da die Markierung ein separates Grafikelement ist, müssen Breite und Höhe explizit festgelegt werden.

Die Eigenschaft id des Elements <mark> wird verwendet, um auf diesen Markierung abzuziehen.

Die Koordinaten refX und refY stellen den Punkt innerhalb der Markierung als Referenzpunkt ein. Der Referenzpunkt ist der Punkt, an dem die Markierung am Anfang des Pfades positioniert wird. In diesem Beispiel sind refX und refY auf den Mittelpunkt des Kreises gesetzt, was bedeutet, dass der Mittelpunkt des Kreises am Anfang des Pfades positioniert wird. Wenn refX und refY nicht gesetzt sind, werden sie auf 0 gesetzt, was bedeutet, dass der linke obere Ecke der Markierung am Anfang des Pfades positioniert wird.

Innerhalb des Elements <marker> befindet sich ein <circle>-Element. Das Element circle ist definiert als5,5Als Mittelpunkt (cx und cy). Der Mittelpunkt ist der Mittelpunkt des virtuellen Rahmens der Markierung. Dies ist nicht der tatsächliche Position, an der sie im Bild platziert wird. Die Größe des virtuellen Rahmens wird im Element <marker> mit den Eigenschaften markerWidth und markerHeight festgelegt.8.8.

Automatische Ausrichtung

Dies ist ein weiteres Beispiel für eine <marker>-Definition. In diesem Beispiel wird ein Dreieck definiert, das als Pfadpfeil verwendet wird.

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

Das <path> im Element <marker> zeichnet einen Dreieck mit einer Spitze nach rechts. Wenn der Pfad jedoch nicht eine horizontale Linie ist, muss das Dreieck gedreht werden, um der Richtung des verwendeten Pfades zu entsprechen. Dies kann durch die Einstellung der Eigenschaft 'orient' auf 'auto' erreicht werden. Dies dreht das Symbol im Element <marker> so, dass es der Richtung des zitierten Pfades entspricht.

Das folgende Bild zeigt fünf Linien mit verschiedenen Neigungen, die alle die gleichen beiden Markierungen als Start- und Endmarke verwenden. Beachten Sie, wie die Markierung automatisch rotiert, um der Neigung der verwendeten Linie zu entsprechen.

Das Aussehen beim Ausführen ist wie folgt:

Dies ist das Ergebnis der Einstellung der Eigenschaft 'orient' des Elements <mark> auf 'auto'.

Oder Sie können den Wert der Eigenschaft 'orient' auf einen festen Grad setzen (z.B.45Dies rotiert das Markierungselement um diesen Grad. Allerdings ist dies weit weniger nützlich als die automatische Ausrichtungsfunktion.

Markierungen von Pfaden referenzieren

Sie können die folgenden CSS-Attribute verwenden, um Markierungen von Pfaden zu referenzieren:

• marker-start

• marker-mid

• marker-end

Diese drei CSS-Attribute zuweisen den Marker den Anfangs-, Mittel- und Endpunkten des Pfades.

CSS-Attribute müssen im style-Attribut des verwendeten <path>-Elements stehen. Sie können das <marker>-Element wie folgt durch Bezugnahme auf sein id-Attribut referenzieren:

marker-start: url(#markerId);

markerId sollte den Wert des id-Attributs des zu referenzierenden <mark>-Elements ersetzen.

Dies ist ein Beispiel für die Verwendung aller drei CSS-Attribute:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

Das Ergebnis des Laufens ist wie folgt:

Markierungen von anderen Formen referenzieren

Das <path>-Element ist nicht das einzige SVG-Element, das Markierungen verwenden kann. 　 <line>, <polyline> und <polygon>-Elemente können ebenfalls Markierungen verwenden. Sie funktionieren auf die gleiche Weise wie das <path>-Element: durch die Markierung am Anfang, in der Mitte und am Ende (respektive: marker-start, marker-mid und marker-Verweis auf das id-Attribut des <marker>-Elements im end)-CSS-Attribut.

Markereinheit

Die Größe der Markierung kann auf Skalierung eingestellt werden, um der Breite der Umrandung des Pfades, für den sie verwendet wird, zu entsprechen. Hier ist ein visuelles Beispiel:

Durch die Einstellung von markerUnits des <marker>-Elements auf strokeWidth kann dieses Effekt erreicht werden. Dies ist tatsächlich der Standardwert dieser Eigenschaft, daher ist dies die Standardverhalten, selbst wenn Sie das markerUnits-Attribut nicht festlegen. Hier ist das Aussehen im SVG-Code:

<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
　　　　orient="auto" markerUnits="strokeWidth">
　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
</marker>

Um eine automatische Vergrößerung zu vermeiden und die Markierung so anzupassen, dass sie der Strokenbreite des Pfades entspricht, stellen Sie das Attribut markerUnits auf userSpaceOnUse ein. Auf diese Weise bleibt die Markierung unabhängig von der Strokenbreite des Pfades in ihrer Größe.