marker-mid

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

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

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

プレゼンテーション属性として任意の要素に適用できますが、 <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect> の 7 つの要素でのみ効果があります。

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> (en-US) 要素への参照で、指定された頂点に描画されるものです。参照が有効でない場合は、マーカーは描画されません。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# VertexMarkerProperties

ブラウザーの互換性

BCD tables only load in the browser

関連情報