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

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:marker要素/m.svg

code:m.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>