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.

marker-mid 属性は、指定されたシェイプの中間の頂点すべてに描かれる矢印やマーカーを定義します。

マーカーは、パスデータの最初と最後以外のすべての頂点に描画されます。

メモ: プレゼンテーション属性なので、 marker-mid は CSS プロパティとして使用することができます。

この属性は次の SVG 要素で使用できます。

例

html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
      <circle cx="4" cy="4" r="4" stroke="none" fill="#f00" />
    </marker>
  </defs>
  <polyline
    fill="none"
    stroke="black"
    points="20,100 40,60 70,80 100,20"
    marker-mid="url(#circle)" />
</svg>

使用上のメモ

値 none | <marker-ref>
既定値 none
アニメーション 可
none

指定された頂点にマーカー記号を描画してはならないことを示します。

<marker-ref>

この値は <marker> 要素への参照で、指定された頂点に描画されるものです。参照が有効でない場合は、マーカーは描画されません。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# VertexMarkerProperties

ブラウザーの互換性

BCD tables only load in the browser

関連情報