marker-start

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die marker-start CSS Eigenschaft verweist auf einen Marker, der am ersten Scheitelpunkt des Pfades des Elements gezeichnet wird, also an seinem Startscheitelpunkt. Der Marker muss mit einem SVG-<marker>-Element definiert worden sein und kann nur mit einem <url> Wert referenziert werden. Der Wert der CSS-Eigenschaft überschreibt alle Werte des marker-start Attributs im SVG.

Bei vielen formenunterstützenden Formen befinden sich der erste und letzte Scheitelpunkt an der gleichen Stelle: zum Beispiel die obere linke Ecke eines <rect>. Bei solchen Formen werden zwei Marker an diesem Punkt gezeichnet, wenn sowohl der erste als auch der letzte Marker definiert sind, obwohl sie möglicherweise nicht in dieselbe Richtung zeigen.

Hinweis: Die marker-start Eigenschaft hat nur Auswirkungen auf Elemente, die SVG-Marker verwenden können. Siehe marker-start für eine Liste.

Syntax

css
marker-start: none;
marker-start: url(markers.svg#arrow);

/* Global values */
marker-start: inherit;
marker-start: initial;
marker-start: revert;
marker-start: revert-layer;
marker-start: unset;

Werte

none

Dies bedeutet, dass kein Marker am ersten Scheitelpunkt des Pfades des Elements gezeichnet wird.

<marker-ref>

Ein <url>, das auf einen durch ein SVG-<marker>-Element definierten Marker verweist, der am ersten Scheitelpunkt des Pfades des Elements gezeichnet werden soll. Wenn die URL-Referenz ungültig ist, wird kein Marker am ersten Scheitelpunkt des Pfades gezeichnet.

Formale Definition

Anfangswertnone
Anwendbar auf<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
VererbtJa
Berechneter Wertwie angegeben, aber mit absoluten <url> Werten
Animationstypdiskret

Formale Syntax

marker-start = 
none |
<marker-ref>

<marker-ref> =
<url>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Beispiel

html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="triangle"
      viewBox="0 0 10 10"
      markerWidth="10"
      markerHeight="10"
      refX="1"
      refY="5"
      markerUnits="strokeWidth"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
    id="test"
    fill="none"
    stroke="black"
    points="20,100 40,60 70,80 100,20" />
</svg>
css
polyline#test {
  marker-start: url(#triangle);
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# MarkerStartProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
marker-start

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch