矢印などの描画に使用する。線の端に描画する形及び直線との関係を定義する。
※ADOBEのビュワーを使用する場合、version3beta以降が必要。
<marker viewBox="描画範囲" refX="接続座標X" refY="接続座標Y" markerUnits="座標系" markerWidth="マーカー幅" markerHeight="マーカー高" orient="向き" >描画定義</marker>
描画定義で定義する図形の範囲を定義する。
線との接続座標を定義する。線との接続座標の内、Ｘ座標を定義する。
線との接続座標を定義する。線との接続座標の内、Ｙ座標を定義する。
マーカーの表示サイズを決定する座標系を選択する。接続する線の幅にマーカーのサイズを連動させる場合、"strokeWidth"を指定する。接続する線の幅に連動させず、描画中の座標系に合わせる場合、"userSpaceOnUse"を指定する。
マーカーの表示幅を定義する。
マーカーの表示高を定義する。
マーカーの向きを定義する。線の向きと連動させる場合、"auto"を指定する。
上から「マーカーの無い線」「連動する場合」「連動しない場合」
|
<defs> <marker id="Triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> <marker id="Triangle2" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="6" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs> <path d="M 30 30 L 60 30 L 90 30" style="fill:none; stroke:black; stroke-width:2" /> <path d="M 100 30 L 130 30 L 160 30" style="fill:none; stroke:black; stroke-width:4" /> <path d="M 30 60 L 60 60 L 90 60" style="fill:none; stroke:black; stroke-width:2; marker-end:url(#Triangle)" /> <path d="M 100 60 L 130 60 L 160 60" style="fill:none; stroke:black; stroke-width:4; marker-end:url(#Triangle)" /> <path d="M 30 90 L 60 90 L 90 90" style="fill:none; stroke:black; stroke-width:2; marker-end:url(#Triangle2)" /> <path d="M 100 90 L 130 90 L 160 90" style="fill:none; stroke:black; stroke-width:4; marker-end:url(#Triangle2)" /> |
上から「連動する場合」「連動しない場合」
|
<defs> <marker id="Triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> <marker id="Triangle2" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="0"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> <marker id="Triangle3" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="90"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs> <path d="M 30 20 L 60 20 L 90 50" style="fill:none; stroke:black; stroke-width:3; marker-end:url(#Triangle)" /> <path d="M 30 70 L 60 70 L 90 100" style="fill:none; stroke:black; stroke-width:3; marker-end:url(#Triangle2)" /> <path d="M 100 70 L 130 70 L 160 100" style="fill:none; stroke:black; stroke-width:3; marker-end:url(#Triangle3)" /> |
上から「線の終点に表示」「線の始点に表示」「線の中間（接続）点に表示」「線の始点、終点、中間点、全てに表示」
|
<defs> <marker id="Triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs> <path d="M50 20 Q 75 0 100 20 T 150 20" style="fill:none; stroke:black; stroke-width:3; marker-end:url(#Triangle)" /> <path d="M50 40 Q 75 20 100 40 T 150 40" style="fill:none; stroke:black; stroke-width:3; marker-start:url(#Triangle)" /> <path d="M50 60 Q 75 40 100 60 T 150 60" style="fill:none; stroke:black; stroke-width:3; marker-mid:url(#Triangle)" /> <path d="M50 80 Q 75 60 100 80 T 150 80" style="fill:none; stroke:black; stroke-width:3; marker:url(#Triangle)" /> |