SVG/Tutorials/Markierungen
Text-Info
- 20min
- leicht
- SVG
Mit dem marker-Element können Sie Symbole festlegen, die Start-, End- und Zwischenpunkte eines Pfades, einer Linie, eines Polygonzuges oder eines Polygons markieren. Genau wie bei symbol können dies beliebig viele Kindelemente sein.
Inhaltsverzeichnis
Allgemeines
<defs>
<marker id="markerAnfang" markerWidth="7" markerHeight="7" refx="4" refy="4">
<rect x="1" y="1" width="5" height="5" />
</marker>
<marker id="markerKreis" markerWidth="8" markerHeight="8" refx="4" refy="4">
<circle cx="4" cy="4" r="3" />
</marker>
<marker id="markerPfeil" markerWidth="130" markerHeight="13" refx="2" refy="6">
<path d="M2,2 v8 l8,-4z "/>
<text x="15" y="10" stroke="none" fill="#c32e04">Ziel</text>
</marker>
</defs>
<path d="M20,10 v100 h100"
style="marker-start: url(#markerAnfang);
marker-mid: url(#markerKreis);
marker-end: url(#markerPfeil);
"
/>
<path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
style="marker-start: url(#markerAnfang);
marker-mid: url(#markerKreis);
marker-end: url(#markerPfeil);
"
/>
Die Pfade erhalten an Start-, Zwischen- und Endpunkten Markierungen.
markerUnits
Für die Formatierung des marker-Elements stehen Ihnen folgende Attribute zur Verfügung:
markerheight: Höhe des Viewports des marker-Elementsmarkerwidth: Breite des Viewports des marker-ElementsmarkerUnits: legt die Berechnungsgrundlage für die weiteren Werte fest:strokeWidth: bezieht sich auf die Dicke der RandlinienuserSpaceOnUse: legt fest, dass die "normalen" Pixel gelten
refX: Bezugspunkte des marker-ElementsrefY: Bezugspunkte des marker-Elements
Wenn die Bezugspunkte refX und refY nicht gesetzt werden, wird ein Wert von 0,0 angenommen, sodass der Kreis seinen Mittelpunkt in der linken oberen Ecke hätte und dadurch nur teilweise sichtbar wäre.
path {
stroke: #666;
fill:none;
stroke-width:20px;
}
marker {
stroke: #000;
fill:url(#verlauf1);
}
#eins {
stroke-width: .05px;
}
#zwei {
stroke-width: 1px;
}
<marker id="eins" markerWidth="22" markerHeight="22" markerUnits="strokeWidth" refx="1" refy="1">
<circle cx="1" cy="1" r=".5" />
</marker>
<marker id="zwei" markerWidth="22" markerHeight="22" markerUnits="userSpaceOnUse" refx="10" refy="10">
<circle cx="10" cy="10" r="9" />
</marker>
markerUnits="userSpaceOnUse", damit Sie mit den gewohnten Pixelwerten rechnen können.orient
Im ersten Beispiel entspricht die Lage der End-Markierungen nicht dem Verlauf des Pfades. Mit dem orient-Attribut können Sie dies anpassen.
Folgende Einstellungen sind möglich:
auto: automatische Ausrichtung am Verlauf des Pfadesauto-start-reverse: automatische Ausrichtung wie beiauto, außer beim Startpunkt, der um 180° gedreht ist, sodass ein einfacher Pfeil in die (jeweils) richtige Richtung zeigt (<---->)Zahl: Angabe eines Winkelmaßes
<defs>
<marker id="markerAnfang" markerWidth="7" markerHeight="7" refx="4" refy="4">
<rect x="1" y="1" width="5" height="5" />
</marker>
<marker id="markerPfeil" markerWidth="130" markerHeight="13" refx="2" refy="6">
<path d="M2,2 v8 l8,-4z "/>
</marker>
<marker id="markerPfeilAuto" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 v8 l8,-4z "/>
</marker>
</defs>
<path d="M20,10 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
style="marker: url(#markerPfeil); marker-start: url(#markerAnfang);"
/>
<path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
style="marker: url(#markerPfeilAuto); marker-start: url(#markerAnfang);"
/>
marker-start wieder überschrieben wird.marker-knockout-left, marker-knockout-right
In SVG2 soll es ein neues marker-knockout-Attribut geben, mit der Sie einfach eine Form als Markierung aus dem Strich des Pfades herausschneiden können. Auf der w3.org-Seite finden Sie eine Grafik mit Beispielen.[1]
Folgende Werte wären möglich:
knockout-offsetLängeknockout-shape: Form
Markierungen referenzieren
Nachdem die Markierungen definiert sind, können sie beliebig referenziert werden.
Folgende Attribute sind möglich:
marker: setzt eine Markierung für alle Punkte, kann aber durch nachfolgende Attribute überschrieben werden:marker-start: Startpunktmarker-mid: Zwischenpunktmarker-end: Endpunkt
<path d="M20,10 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
style="marker: url(#markerPfeil); marker-start: url(#markerAnfang);"
/>
<path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
style="marker: url(#markerPfeilAuto); marker-start: url(#markerAnfang);"
/>
marker-start wieder überschrieben wird.marker-end:none oder die gleichen Markierungen.
markerUnits="strokeWidth"alle Werte unter Bezug der Strichdicke umgerechnet werden. Vergleichen Sie die Werte der Pfade#einsund#zwei. Während das marker-Symbol von Pfad#einseine Strichdicke von 0.05px hat, weil der Bezugswert die Strichdicke des Pfades mit 20px Breite ist, sind die Werte für den Pfad#zweinormale Pixelwerte.