SVG:marker

svg-marker.png
マーカーは図形の塗り潰し,線の描画の上に描画される.
マーカーのサイズは描画カンバスにおける絶対サイズ(userSpaceOnUse),
もしくは先端の太さに対する倍率(strokeWidth)から選ぶ.
マーカー図形はmarker要素のviewBox属性から定まる座標系を元に定義され,
マーカーの描画時に線の端点座標とmarker要素のrefX属性,refY属性で表された座標が重ね合わされる.
マーカーは通常図形の右側が線の向きに合わされて描画されるが,orient属性を指定することで向きを固定することも出来る.
marker要素で定義したマーカー図形は
viewBox
描画の基準位置
refX
マーカーを描く中心位置X(全体座標で)
refY
マーカーを描く中心位置Y(全体座標で)
marker-start
始点
marker-mid
真ん中
marker-end
終点

url関数を用いて,marker要素のidを指定すると端点図形が描画される.

  <marker viewBox="0 -5 10 10" refX="5" refY="0"
    markerWidth="10" markerHeight="10" id="triangle" fill="OliveDrab">
  <polygon points="10,0 0,5 0,-5" />
</marker>

サポートサイト Wikidot.com