marker-mid

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

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

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

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

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

仕様書

仕様書 状態 備考
Scalable Vector Graphics (SVG) 2
marker-mid の定義
勧告候補 重要な変更なし
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
marker-mid の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
marker-midChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

実装状況不明  
実装状況不明

関連情報