SVG:marker要素
markerUnits="'strokeWidth' または 'userSpaceOnUse'。
'strokeWidth' を使用すると、1 単位は 1 ストローク幅になります。
それ以外の場合、マーカは拡大縮小されず、参照元と同じビュー単位を使用します
（デフォルトは 'strokeWidth'）。"
refx="マーカが頂点に接続する位置（デフォルトは 0）"
refy="マーカが頂点に接続する位置（デフォルトは 0）"
orient="'auto' または、マーカを常に表示する角度。
'auto' は、x 軸を頂点の接線とする角度を計算します
（デフォルトは 0）"
markerWidth="マーカの幅 (デフォルトは 3)"
markerHeight="マーカの高さ (デフォルトは 3)"
viewBox="the points "seen" in this SVG drawing area.
4 つの値は、空白またはカンマで区切ります。
(min x, min y, width, height)"
All
marker-start
marker-mid
marker-end
m.svg<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- arrowhead marker definition -->
<marker
id="arrow"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="6"
markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- simple dot marker definition -->
<marker
id="dot"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth="5"
markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- Coordinate axes with an arrowhead in both directions -->
<polyline
points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- Data line with polymarkers -->
<polyline
points="15,80 29,50 43,60 57,30 71,40 85,15"
fill="none"
stroke="grey"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>