svgは単にグラフィックを描くだけでなく,グラフやダイアグラムを作る際にも用いられる.本項で示すmarker要素は,図表を作成する際に頻出する矢印線を引くための機能である.実際に使ってみるとわかるがこのmarker要素は非常に機能に乏しく,実際に利用するとなるとその使い所が非常に制限されてしまう.この点は仕様策定者側も認識しているようで,svg2では多量の機能追加が行われる予定である.(少なくとも現在の仕様の5倍程度は膨らむ?)
svgは単にグラフィックを描くだけでなく,グラフやダイアグラムを作る際にも用いられる.本項で示すmarker要素は,図表を作成する際に頻出する矢印線を引くための機能である.実際に使ってみるとわかるがこのmarker要素は非常に機能に乏しく,実際に利用するとなるとその使い所が非常に制限されてしまう.この点は仕様策定者側も認識しているようで,svg2では多量の機能追加が行われる予定である.(少なくとも現在の仕様の5倍程度は膨らむ?)
マーカーは図形の塗り潰し,線の描画の上に描画される.マーカーのサイズは描画カンバスにおける絶対サイズ(userSpaceOnUse),もしくは先端の太さに対する倍率(strokeWidth)から選ぶ.マーカー図形はmarker要素のviewBox属性から定まる座標系を元に定義され,マーカーの描画時に線の端点座標とmarker要素のrefX属性,refY属性で表された座標が重ね合わされる.マーカーは通常図形の右側が線の向きに合わされて描画されるが,orient属性を指定することで向きを固定することも出来る.marker要素で定義したマーカー図形はmarker-start(始点),marker-mid(頂点),marker-end(終点)属性から参照する.url関数を用いて,marker要素のidを指定すると端点図形が描画される.
markerUnitsの設定例
マーカーの描画位置の確認例
orient属性に依るマーカー角度の設定例
複数の線を単一のpath要素で定義した場合,marker-start,marker-endによるマーカーはpath要素全体の起点と終点にのみ描画される.
始点と終点とでマーカー図形を180°反転させたい場合, SVG2をサポートしている環境であればorient属性に「auto-start-reverse」を指定する事が出来る. 下は両矢印を描画する例である.
SVG2をサポートしていない場合は始点用と終点用の2つのマーカーを定義する必要がある.その際にuse要素を使うことでマーカー図形の定義を一箇所に集約することが出来る.
一般的な図形要素については「fill」「stroke」「markers(textを除く)」の3つの描画対象が存在するが, これらの描画は通常「fill→stroke→markers」の順に行われる. この順はpaint-order属性で変更することが可能だ.
線の色とマーカーの色とを共通化したい場合は,marker要素と線の要素とをg要素で囲み,color属性による色の一括設定を行うと良い.
多くの線を記述する必要があっていちいちmarker要素を定義するのが面倒な場合は,矢印線の生成は黒色で行い色の変更を後述するfilterで行う手も考えられる.
marker要素に依る図形の配置は原則端点及び頂点に限られてしまうため,一般的に行われている折れ線の各線分にマーカーを配置するといった用途には向かない.が,次のようにマーカー専用の線分を別途重ねることで擬似的に実現することは出来る.
このようなグラフの出力にはスクリプトを用いるのが通常であるため,線分の中点を求めるのはそれほど難しくないはずだ.しかしこの作業は本質的にuse要素を使って図形の配置を行なっているのとなんら変わりがないため,無駄なpolyline要素が配置される分冗長と言える.このコードをuse要素で書きなおしてみよう.
折れ線へのマーカーの適用はsvg2にて改善される予定である.