SVG-Marker: Eigene Pfeilspitzen passend ausrichten

Um eine eigene Pfeilspitze an einen SVG-Pfad anzuhängen, definiere ihre Grafik innerhalb eines <marker> und referenziere seine ID mit marker-end. Setze refX und refY auf den Punkt der Grafik, der den Pfadendpunkt treffen soll. Wähle dann, ob sich der Marker mit dem Pfad drehen und mit dessen Konturbreite wachsen soll.

Diese Entscheidungen lösen unterschiedliche Probleme. Ein Pfeil kann in die richtige Richtung zeigen und seinen Endpunkt trotzdem verfehlen. Er kann sich außerdem an einer dünnen Kontur korrekt ausrichten und dann zu groß werden, wenn die Linie dicker wird. Dieser Leitfaden trennt Platzierung, Richtung und Größe anhand einer eigenen Zeigerform.

Beginne mit einem kleinen vollständigen SVG

Speichere Folgendes als markers.svg und öffne es in einem Browser. Der Zeiger ist ein von Hand erstelltes Beispiel mit seiner Spitze bei (11, 6) innerhalb eines Koordinatenraums von 12 × 12. Er ist kein PerfectVector-Konvertierungsergebnis.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

Der erste Pfad ist gerade; der zweite ist eine Kurve. Beide referenzieren an beiden Enden denselben Marker. Der <defs>-Block speichert die Definition, während die Pfadreferenzen sie sichtbar machen. Die marker-Referenz von MDN behandelt die Eigenschaften zum Anbringen am Anfang, in der Mitte und am Ende.

Verwende eine ID, die im umgebenden Dokument eindeutig ist. Wenn du mehrere SVGs inline kombinierst, versehe ihre Marker-IDs mit Präfixen und aktualisiere jede passende url(#...)-Referenz. Der Leitfaden zu SVG-Symbol-Sprites erklärt dasselbe Problem der Referenzverwaltung für wiederverwendete Icons.

Setze den beabsichtigten Punkt auf den Endpunkt

refX="11" refY="6" legt fest, welcher Punkt der Markergrafik mit dem Pfadendpunkt zusammenfallen soll. Es verschiebt nicht den Pfad selbst. In diesem Beispiel ist dieser Punkt die scharfe Spitze.

Vergleiche das mit refX="0" refY="0". Der Browser setzt den Koordinatenursprung des Markers auf den Endpunkt, sodass die Spitze auf einer horizontalen Linie weiter rechts und unten liegt. Eine größere Markergröße macht den Fehler sichtbarer; sie repariert den Anker nicht.

MDN dokumentiert refX und refY als Referenzpunktkoordinaten des Markers. Lies sie in Bezug auf die eigenen Koordinaten der Grafik einschließlich ihrer viewBox, statt aus ihrer dargestellten Breite zu raten.

Wir öffneten das vollständige SVG separat und renderten den Vergleich im Browser. Das Ändern des Referenzpunkts brachte die Spitze auf das orange Kreuz. Das Ändern der Orientierung kehrte den Startpfeil um. Das Ändern des Einheitenmodus steuerte, ob der Zeiger mit der Linie wuchs. Diese Beobachtungen gelten für dieses Beispiel; prüfe die tatsächlich exportierte Datei in der Anwendung, die sie erhalten wird.

Eine exakt am Endpunkt verankerte Spitze lässt die Kontur ebenfalls bis zu diesem Punkt reichen. Bei einer dicken Linie kann ein Teil der Kontur neben einer schmalen Spitze sichtbar bleiben, wie der Vergleich zeigt. Wenn diese Naht wichtig ist, passe Motiv, Anker oder Pfadendpunkt gemeinsam an und prüfe den Übergang. Die Markerplatzierung kürzt die zugrunde liegende Kontur nicht.

Lass die Kurve die Richtung steuern

Bei einer Pfeilspitze am Pfadende folgt orient="auto" der Richtung des Pfads an diesem Punkt. Die Endrichtung einer Kurve ergibt sich aus ihrer lokalen Tangente; der Pfeil muss also nicht in die gerade Verbindungslinie zwischen den beiden Pfadendpunkten zeigen.

Für Pfeile an beiden Enden verwendest du orient="auto-start-reverse". Es verhält sich am Ende wie auto, dreht den Startmarker aber um zusätzliche 180 Grad. Die orient-Dokumentation von MDN beschreibt dies als Möglichkeit, eine Pfeilspitze wiederzuverwenden, die an beiden Enden nach außen zeigt.

Der Vergleich oben rechts macht den Unterschied sichtbar: Mit auto zeigt der Startzeiger entlang der Kurve. Mit auto-start-reverse zeigt er vom Start weg. Du brauchst keine zweite, manuell gespiegelte Kopie der Form.

Prüfe die Pfadrichtung, wenn dich das Ergebnis überrascht. Das Umkehren eines Pfads ändert, welches Ende sein Anfang ist. Ein Pfeil, der einen Fluss anzeigen soll, sollte entsprechend dieser Richtung angebracht werden, auch wenn die beiden Enden zufällig dieselben Bildschirmpositionen wie zuvor einnehmen.

Entscheide, ob die Linienstärke die Markergröße ändern soll

markerUnits legt das Koordinatensystem für Abmessungen und Inhalte des Markers fest. Sein Standard ist strokeWidth; die Alternative ist userSpaceOnUse. Sieh dir die markerUnits-Referenz von MDN für diesen Unterschied an.

Der Zeiger belegt 10 der 12 horizontalen Einheiten seiner viewBox. Mit markerWidth="6" und markerUnits="strokeWidth" beträgt seine ungedrehte Breite 10 / 12 × 6 × stroke-width: 20 Benutzereinheiten auf der Kontur mit 4 Einheiten und 40 auf der Kontur mit 8 Einheiten. Der Vergleich unten links verwendet diese Einstellungen.

Um diesen Zeiger bei beiden Konturstärken 20 Einheiten breit zu halten, ändere die Definition in:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

Der Vergleich unten rechts verwendet diese Werte. Wenn du markerWidth="6" beibehältst und nur den Einheitenmodus änderst, entsteht ein viel kleinerer Zeiger, weil sechs Einheiten nicht mehr mit der Konturbreite multipliziert werden.

userSpaceOnUse bedeutet keine feste Anzahl an Bildschirmpixeln. Das Skalieren des umgebenden SVG oder seines Koordinatensystems kann weiterhin die Darstellungsgröße ändern. Prüfe den Marker in der endgültigen Layoutgröße, besonders wenn ein großes Motiv zu einer kleinen Diagrammanmerkung verkleinert wird.

Bereite ein eigenes Motiv vor, bevor du daraus einen Marker machst

Zeichne den Pfad für ein Dreieck oder einen einfachen Zeiger direkt. Behalte bei vorhandener Vektorgrafik die ursprünglichen Pfade und entscheide, welche Koordinate an die Linie angeschlossen werden soll. Erhalte beabsichtigte Löcher, vereinfache Details, die in der vorgesehenen Größe verschwinden, und gib der Grafik im Marker-Viewport genügend Raum.

Wenn eine eigene Pfeilspitze oder ein dekoratives Motiv nur als PNG oder JPG erhalten ist, kann PerfectVectors Bild-zu-Vektor-Ablauf vor dem Einbinden als Marker einen SVG-Kandidaten rekonstruieren. Vergleiche Silhouette und kleine Öffnungen mit der Quelle, entferne unerwünschte Hintergrundformen und wähle dann Begrenzungen und Ankerpunkt der freigegebenen Grafik. Die Konvertierung erstellt keine Markerdefinitionen, weist keine Pfadrichtung zu und ergänzt kein Verhalten von Diagrammverbindungen.

Halte die Farben beim Testen explizit. Dieses Beispiel verwendet einen blaugrünen Marker und eine dunkelblaue Linie, damit ihre Grenze sichtbar bleibt. Wenn dein eigener Pfeil durchgehend eine Farbe haben soll, setze beide Farbgebungen bewusst und prüfe das ausgelieferte Ergebnis. Der Leitfaden zur SVG-Farbbearbeitung behandelt feste Füllungen und Stile, die beim Umfärben stören können.

Prüfe die Datei dort, wo sie verwendet wird

Behalte eine bearbeitbare Masterdatei und teste dann eine Ausgabekopie im tatsächlichen Webseiten-, Editor- oder Exportablauf. Eine korrekte Browser-Vorschau belegt die Browser-Darstellung dieser Datei; sie belegt nicht das Importverhalten jeder Anwendung.

• Bestätige nach dem Zusammenstellen oder Optimieren der Datei, dass jedes url(#...) auf die beabsichtigte Marker-ID zeigt.
• Prüfe gerade und gekrümmte Pfade einschließlich eines Startmarkers, wenn du einen verwendest.
• Vergleiche die dünnsten und dicksten Linienstärken im Design.
• Prüfe Spitze, Übergang und abgeschnittene Grafik in der endgültigen Darstellungsgröße.
• Öffne das ausgelieferte SVG unabhängig erneut und vergleiche es mit der Quellvorschau.

Marker sind sichtbare Dekorationen an Pfadpositionen. Sie erzeugen keine semantischen Verbindungen zwischen Diagrammobjekten. Verwende für die eigenen Verbindungspunkte und das Schablonenverhalten eines Diagrammeditors dessen natives Formsystem; der Leitfaden zu eigenen draw.io-Formen behandelt diese separate Aufgabe.

Ein Marker ist außerdem nicht automatisch eine physisch verbundene Schneidekontur. Wenn das Ziel geschlossene Schnittgeometrie braucht, bereite eine separate pfadbasierte Ausgabekopie im Vektoreditor vor und prüfe sie. Eine auf dem Bildschirm überlappende Linie und Pfeilspitze beweisen keine vereinigte Kontur. Weitere SVG-Vorbereitungsleitfäden behandeln Grafikbereinigung und nachgelagerte Prüfungen.

FAQ

Warum ist meine SVG-Pfeilspitze gegenüber der Linie versetzt? Prüfe refX und refY anhand der Koordinaten der Markergrafik. Sie bezeichnen den Punkt, der auf dem Pfadendpunkt platziert wird. In diesem Beispiel liegt die Spitze bei 11,6; mit 0,0 wird stattdessen der Ursprung dort platziert.

Wie verwende ich eine Pfeilspitze an beiden Enden wieder? Referenziere denselben Marker mit marker-start und marker-end und verwende orient="auto-start-reverse". Die Startinstanz wird umgekehrt, während die Endinstanz der Pfadrichtung folgt.

Warum wächst meine Pfeilspitze, wenn ich die Linie dicker mache? Der Standardwert von markerUnits ist strokeWidth. Verwende userSpaceOnUse, wenn der Marker seine Größe in den Benutzerkoordinaten des Elements behalten soll, und passe dann markerWidth und markerHeight an dieses Einheitensystem an.

Verwandelt ein Marker den Pfeil in einen geschlossenen Pfad? Nein. Die Markerdefinition bleibt vom Pfad getrennt, der sie referenziert. Bereite tatsächlich verbundene Geometrie vor und prüfe sie, wenn ein nachgelagerter Schneide- oder Bearbeitungsablauf das erfordert.

Quellen

1. MDN — marker — Markerdefinitionen, unterstützte Formen und Anbringungseigenschaften.
2. MDN — refX — Horizontale Referenzpunktplatzierung im Markerkoordinatensystem.
3. MDN — refY — Vertikale Referenzpunktplatzierung im Markerkoordinatensystem.
4. MDN — orient — Automatische Drehung und Umkehrung der Startinstanz.
5. MDN — markerUnits — Konturrelative Größe und Größe in Benutzerkoordinaten.

Beginne mit einem Motiv und prüfe Anker, Richtung und Größe sowohl auf einer Linie als auch auf einer Kurve. Wenn dein eigenes Motiv nur als Rasterbild vorliegt, bereite einen SVG-Kandidaten vor, prüfe seine Silhouette und Öffnungen und binde die akzeptierten Pfade dann als Marker ein.