SVG/Element/marker

Aus SELFHTML-Wiki
SVG‎ | Element
Wechseln zu: Navigation, Suche
Disambig-dark.svg Der Begriff marker ist mehrdeutig.
Neben dem SVG marker-Element gibt es noch das CSS-Pseudoelement ::marker.

Das marker-Element Markierungspunkte wie Pfeile oder Kreise an path, line, polyline oder polygon-Elementen.

Syntax
Start-Tag: notwendig
End-Tag: notwendig
Elternelemente
Darf vorkommen in:
defs
erlaubte Inhalte
*animate, animateMotion, animateTransform
Attribute
Name Inhalt Standardwert Bedeutung
markerWidth NUMBER Breite
markerHeight CDATA Höhe
markerUnits strokeWidth
userSpaceOnUse		 strokeWidth Einheiten
orient auto,
auto-start-reverse,
Winkel,
Number 		Richtung
preserveAspectRatio defer, align, meetOrSlice
refX NUMBER X-Koordinate des Referenzpunkts
refY NUMBER Y-Koordinate des Referenzpunkts
systemLanguage IANA Sprachkürzel
transform CDATA
viewBox NUMBER

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel 
 <defs>
 <marker id="mStart" markerWidth="7" markerHeight="7" refx="4" refy="4">
 <rect x="1" y="1" width="5" height="5" />
 </marker>
 
 <marker id="mDot" markerWidth="8" markerHeight="8" refx="4" refy="4">
 <circle cx="4" cy="4" r="3" fill="context-fill" stroke="context-stroke"/>
 </marker>
 <marker id="mArrow" markerWidth="130" markerHeight="13" refx="2" refy="6">
 <path d="M2,2 v8 l8,-4z" fill="context-fill" stroke="context-stroke"/>
		<text x="15" y="10" stroke="none" fill="context-fill">Ziel</text>
 </marker>
 </defs>
 <path d="M20,10 v100 h100"
 style="marker-start: url(#mStart);
 marker-mid: url(#mDot);
 marker-end: url(#mArrow);
 "
 />
 <path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
 style="marker-start: url(#mStart);
 marker-mid: url(#mDot);
 marker-end: url(#mArrow);
 "
 />
Die beiden Pfade erhalten für Start-, Weg- und Endpunkt Referenzen auf die im Definitionsabschnitt angelegten marker.
Diese erhalten mit context-fill die Füll- und Randfarbe des entsprechenden Pfades.


Siehe auch

Weblinks

Abgerufen am 7.12.2025
von "http://wiki.selfhtml.org/wiki/SVG/Element/marker"