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 ⁨April 2017⁩.

Die marker-start CSS Eigenschaft verweist auf einen Marker, der am ersten Scheitelpunkt des Pfades des Elements gezeichnet wird; das heißt, an seinem Startpunkt. 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 die ersten und letzten Scheitelpunkte an der gleichen Stelle: zum Beispiel die obere linke Ecke eines <rect>. In solchen Formen, wenn sowohl der erste als auch der letzte Marker definiert sind, werden an diesem Punkt zwei Marker gezeichnet, auch wenn sie möglicherweise nicht in die gleiche Richtung zeigen.

Hinweis: Die marker-start-Eigenschaft wird nur für Elemente wirksam, 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>, der auf einen Marker verweist, der durch ein SVG-<marker>-Element definiert ist und am ersten Scheitelpunkt des Pfades des Elements gezeichnet werden soll. Wenn der URL-Verweis ungültig ist, wird kein Marker am ersten Scheitelpunkt des Pfades gezeichnet.

Formale Definition

Anfangswert	`none`
Anwendbar auf	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Vererbt	Ja
Berechneter Wert	wie angegeben, aber mit absoluten `<url>` Werten
Animationstyp	diskret

Formale Syntax

marker-start = 
  none          |
  <marker-ref>  

<marker-ref> = 
  <url>

Beispiel

html,
body,
svg {
  height: 100%;
}

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="red" />
    </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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden