<marker>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<marker> は SVG の要素で、指定された <path>、<line>、<polyline>、<polygon> のいずれかの要素上に矢印の先端やポリマーカーを描画するために使用されるグラフィックを定義します。
マーカーは、marker-start、marker-mid、marker-end プロパティを使用して図形に添付することができます。
使用コンテキスト
属性
markerHeight-
この属性は、マーカーのビューポートの高さを定義します。 値の型: <length>; 既定値:
3; アニメーション: 可 markerUnits-
この属性は、
markerWidth、markerHeight属性および<marker>のコンテンツの座標系を定義します。 値の型:userSpaceOnUse|strokeWidth; 既定値:strokeWidth; アニメーション: 可 markerWidth-
この属性は、マーカーのビューポートの幅を定義します。 値の型: <length>; 既定値:
3; アニメーション: 可 orient-
この属性は、マーカーが添付されている図形に対するマーカーの向きを、相対的に定義します。 値の型:
auto|auto-start-reverse| <angle>; 既定値:0; アニメーション: 可 preserveAspectRatio-
この属性は、 SVG の断片がアスペクト比異なるコンテナーに埋め込まれた場合、どのように変形するべきかを定義します。 値の型: (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?; 既定値:xMidYMid meet; アニメーション: 可 refX-
この属性は、マーカーの参照する点の x 座標を定義します。 値の型:
left|center|right| <coordinate>; 既定値:0; アニメーション: 可 refY-
この属性は、マーカーの参照する点の y 座標を定義します。 値の型:
top|center|bottom| <coordinate>; 既定値:0; アニメーション: 可 viewBox-
この属性は、現在の SVG 断片の SVG ビューポートの境界を定義します。 値の型: <list-of-numbers>; 既定値: none; アニメーション: 可
DOM インターフェイス
この要素は SVGMarkerElement インターフェイスを実装しています。
例
矢印の先端の描画
次の例では、直線と曲線上に矢印の先端を描く方法を示します。
曲線の場合、marker-mid マーカーを用いて、それぞれの点に矢印の先端が描かれます。
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 矢印の先端として使用するマーカー -->
<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>
</defs>
<!-- マーカー付きの直線 -->
<line
x1="10"
y1="10"
x2="90"
y2="90"
stroke="black"
marker-end="url(#arrow)" />
<!-- マーカー付きの曲線パス -->
<path
d="M 110 10
C 120 20, 130 20, 140 10
C 150 0, 160 0, 170 10
C 180 20, 190 20, 200 10"
stroke="black"
fill="none"
marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</svg>
ポリマーカーの描画
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 矢印の先端のマーカーの定義 -->
<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>
<!-- 点マーカーの定義 -->
<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>
<!-- 両方の方向に矢印のついた座標軸 -->
<polyline
points="10,10 10,90 90,90"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<!-- ポリマーカー付きのデータ線 -->
<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>
コンテキストの塗りつぶしとストロークの使用
次の例では、context-fill と context-stroke の値を使用して、マーカーが添付された図形と同じ塗りつぶしとストロークを使用するように設定する方法を示します。
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<marker
id="circle"
markerWidth="6"
markerHeight="6"
refX="3"
refY="3"
markerUnits="strokeWidth">
<circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
</marker>
<style>
path {
marker: url("#circle");
}
</style>
<path d="M 10,10 30,10 h 10" stroke="black" />
<path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
<path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
<path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerElement |
ブラウザーの互換性
Loading…
関連情報
- マーカー関係のプロパティ:
marker-start,marker-mid,marker-end