SVG/Elemente/marker

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels 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.

Beispiel
    <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);
                "
    />


Siehe auch

Weblinks

Start-Tag: notwendig
End-Tag: notwendig
<marker>…</marker>
Elternelemente Darf vorkommen in:

defs

erlaubte Inhalte
Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Kernattribute
class ID ordnet ein Element einer oder mehreren Klassen zu.
id ID identifiziert ein einziges Element innerhalb eines Dokuments
lang ID identifiziert eine Sprachangabe
style ID CDATA Stilangabe durch Präsentationsattribute
tabindex ID macht Element „antabbbar“
xml:base CDATA Basis-URL
xml:lang Sprachkürzel legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space default, preserve Verhalten gegenüber whitespace)


Präsentationsattribute
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
cursor
cx (SVG2)
cy (SVG2)
direction
display
dominant-baseline
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
height (SVG2)
isolation
letter-spacing
lighting-color
mask
opacity
overflow
pointer-events
r (SVG2)
rx (SVG2)
ry (SVG2)
text-anchor
text-decoration
unicode-bidi
visibility
word-spacing
writing-mode
width (SVG2)
x (SVG2)
y (SVG2)


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