marker-end

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-end CSS Eigenschaft verweist auf einen Marker, der am letzten Vertex des Pfades des Elements gezeichnet wird, also an seinem Endvertex. 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-end-Attributs im SVG.

Bei vielen markierungsunterstützenden Formen sind die ersten und letzten Vertices derselbe Punkt: zum Beispiel die obere linke Ecke eines <rect>. In solchen Formen werden, wenn sowohl der erste als auch der letzte Marker definiert sind, zwei Marker an diesem Punkt gezeichnet, auch wenn sie möglicherweise nicht in die gleiche Richtung zeigen.

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

Syntax

css

marker-end: none;
marker-end: url("markers.svg#arrow");

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

Werte

none: Dies bedeutet, dass kein Marker am letzten Vertex 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 letzten Vertex des Pfades des Elements gezeichnet werden soll. Wenn der URL-Verweis ungültig ist, wird kein Marker am letzten Vertex 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-end = 
  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-end: url("#triangle");
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # MarkerEndProperty

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