marker-mid

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-mid CSS Eigenschaft verweist auf einen Marker, der an den mittleren Scheitelpunkten des Pfads des Elements gezeichnet wird; das heißt, an jedem seiner Scheitelpunkte zwischen dem Anfangs- und Endscheitelpunkt. Der Marker muss mithilfe eines SVG-<marker>-Elements definiert worden sein und kann nur mit einem <url>-Wert referenziert werden. Der Wert der CSS-Eigenschaft überschreibt alle Werte des marker-mid-Attributs im SVG.

Die Richtung, in die jeder Marker zeigt, ist definiert als die Richtung genau zwischen der Richtung am Ende des vorhergehenden Pfadsegments und der Richtung am Anfang des folgenden Pfadsegments. Dies kann als Kreuzprodukt der Vektoren betrachtet werden, die durch die beiden Pfadrichtungen definiert sind.

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

Syntax

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

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

Werte

none

Dies bedeutet, dass kein Marker an jedem mittleren Scheitelpunkt des Pfads des Elements gezeichnet wird.

<marker-ref>

Ein <url>, der auf einen Marker verweist, der durch ein SVG-<marker>-Element definiert wurde und an jedem mittleren Scheitelpunkt des Pfads des Elements gezeichnet werden soll. Wird auf eine ungültige URL verwiesen, wird kein Marker an den mittleren Scheitelpunkten des Pfads 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-mid = 
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 240 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 130,10 150,10 170,20 170,100 120,100" />
</svg>
css
polyline#test {
  marker-mid: url(#triangle);
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# MarkerMidProperty

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-mid

Legend

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

Full support
Full support

Siehe auch