English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVGタグは、タグ行やパスの開始、中間、終了に使用されます。例えば、円や正方形のタグパスの起点、または矢印タグパスの終点として使用できます。marker要素は、特定の<path>要素、<line>要素、<polyline>要素、または<polygon>要素上に描画される矢印や多角マーカーグラフィックを定義します
これはマーカーの外観を示すシンプルな視覚的な例です:
マーカーは<marker>要素を使用して作成されています。<marker>要素は、<defs>要素内にネストする必要があります。<defs>要素は、SVG画像に一組の再利用可能な定義を保持するために通常使用されます。
これは上図のSVGコードの例です:
<svg width="500" height="100"> <defs> <marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5"> <circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"></circle> </marker> <marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto"> <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;"></path> </marker> </defs> <path d="M100 ,10 L150 ,10 L150 ,60" style="stroke: #"6666ff; stroke-width: 1px; fill: none; marker-start: url(#markerCircle); marker-end: url(#markerArrow); ">"/path> </svg>テストをしてみてください ‹/›
まず、その中の<defs>が2つの<marker>要素を含む要素に注意してください。これらの<marker>要素は、上図に示される開始と終了マーカーを定義しています。
次に、<path>要素がmarkを使用する方法に注意してください。-startとmarker-end CSS属性は、style属性内から二つの<mark>要素を参照しています。これが、特定のパスに使用するマークを指定する方法です。この問題について後ほど詳しく説明します。
マークを定義するには<marker>要素を使用できます。以下はその例です：
<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"> <circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/> </marker>
本例では、8(markerWidth=“8”）の高さに設定されています。8(markerHeight=“8）のマークです。マークは独立したグラフィック要素であるため、明示的に幅と高さを設定する必要があります。
<mark>要素のid属性は、<path>要素からこのマークを参照するために使用されます。
refXとrefY座標は、マーク内のポイントを参照ポイントとして設定します。参照ポイントは、マークをパスの始点に配置するために使用されます。この例では、refXとrefYは円の中心に設定されていますので、円の中心がパスの起点に配置されます。refXとrefYが設定されていない場合、デフォルトで0に設定され、マークの左上角がパスの始点に配置されます。
marker内には<circle>要素があります。circle要素は、5,5（cxとcy）の中心に位置します。中心点はマークの仮想ボックスの中の中心です。これは実際に画像に配置される位置ではありません。markerWidthとmarkerHeightを使用して<marker>要素内で仮想ボックスの大きさを設定します。8.8。
これは別の<marker>定義の例です。この例では、パスの矢印として使用される三角形を定義しています。
<svg width="500" height="100"> <defs> <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto"> <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path> </marker> <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto"> <path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path> </marker> </defs> <path d="M100 ,20 l0 ,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M140 ,20 l25,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M180 ,20 l50 ,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M220 ,20 l50 ,25" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M260 ,20 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> </svg>テストをしてみてください ‹/›
<marker>要素内の<path>は右方向に向かう三角形を描画します。しかし、パスが水平線でない場合、三角形を回転してそのパスの方向に合わせる必要があります。'方向'(orient)属性を'自動'(auto)に設定することでこの操作を行うことができます。これにより、<marker>要素内の形状が参照するパスに合わせて回転します。
以下の画像は、異なる傾斜を持つ五本の線が、同じ二つのマークを使用して始点と終点としています。マークが使用される線の傾斜に合わせて自動的に回転する様子に注目してください。
実行結果は以下の通りです：
これは<mark>要素のorient属性をautoに設定した結果です。
orient属性の値を固定の度数（例えば）に設定することもできます。45この度数でマークを使用時に回転させることになりますが、自動方向機能よりもはるかに有用ではありません。
以下のCSSプロパティを使用して、パスからマーカーを参照できます：
marker-start
marker-mid
marker-end
これらの3つのCSSプロパティは、マーカーをパスの起点、中間、終点に割り当てます。
CSSプロパティは使用する<path>エレメントのstyle属性内に位置する必要があります。以下のようにid属性を参照して<marker>エレメントを参照できます：
marker-start : url(#markerId);
markerIdは参照する<mark>エレメントのidプロパティの値に置き換えられます。
以下はすべての3つのCSSプロパティを使用する例です：
<svg width="500" height="100"> <defs> <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto"> <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path> </marker> <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto"> <path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path> </marker> </defs> <path d="M100 ,20 l0 ,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M140 ,20 l25,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M180 ,20 l50 ,50" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M220 ,20 l50 ,25" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> <path d="M260 ,20 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none; marker-start: url(#markerSquare); marker-end: url(#markerArrow); marker-mid: url(#markerSquare); " ></path> </svg>テストをしてみてください ‹/›
実行結果は以下の通りです：
<path>エレメントがマーカーを使用できるSVGエレメントの唯一ではありません。 <line>、<polyline>、<polygon>エレメントもマーカーを使用できます。 それらは<path>エレメントと完全に同じ方法で操作されます：マーカーの開始、中間、終了（それぞれ：marker-start、marker-midとmarker-end）CSSプロパティで<marker>エレメントのidプロパティを参照します。
マーカーのサイズをスケールに設定し、使用するパスのストローク幅に合わせることができます。以下はその視覚化の例です：
マーカーエレメントのmarkerUnitsプロパティをstrokeWidthに設定することで、この効果を実現できます。これは実際にはこのプロパティのデフォルト値であり、markerUnitsプロパティを設定していない場合でも、デフォルトの動作です。SVGコードの例は以下の通りです：
<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto" markerUnits="strokeWidth"> <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/> </marker>
パスのストローク幅に関わらず、マーカーがそのサイズを保つように、markerUnits 属性を userSpaceOnUse に設定してください。