svg要素の基本的な使い方まとめ

Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと.

7.マーカーの定義と設定

svgは単にグラフィックを描くだけでなく,グラフやダイアグラムを作る際にも用いられる.本項で示すmarker要素は,図表を作成する際に頻出する矢印線を引くための機能である.実際に使ってみるとわかるがこのmarker要素は非常に機能に乏しく,実際に利用するとなるとその使い所が非常に制限されてしまう.この点は仕様策定者側も認識しているようで,svg2では多量の機能追加が行われる予定である.(少なくとも現在の仕様の5倍程度は膨らむ?)

marker:端点図形の設定

マーカーは図形の塗り潰し,線の描画の上に描画される.マーカーのサイズは描画カンバスにおける絶対サイズ(userSpaceOnUse),もしくは先端の太さに対する倍率(strokeWidth)から選ぶ.マーカー図形はmarker要素のviewBox属性から定まる座標系を元に定義され,マーカーの描画時に線の端点座標とmarker要素のrefX属性,refY属性で表された座標が重ね合わされる.マーカーは通常図形の右側が線の向きに合わされて描画されるが,orient属性を指定することで向きを固定することも出来る.marker要素で定義したマーカー図形はmarker-start(始点),marker-mid(頂点),marker-end(終点)属性から参照する.url関数を用いて,marker要素のidを指定すると端点図形が描画される.

refX,refY
端点描画のviewBox内における基準位置
markerUnits
マーカーサイズの基準
strokeWidth
線の太さ
userSpaceOnUse
描画先の大きさ
markerWidth
線の太さに対する倍率もしくは描画サイズ
markerHeight
線の太さに対する倍率もしくは描画サイズ
orient
端点の描画方向.
auto
自動
auto-start-reverse
始点ではautoと同様, 終点では180ど反転する(SVG2)
[角度]
描画角度
marker-start
始点のマーカーurl
marker-mid
頂点のマーカーurl
※その特性上,line要素では無効.
marker-end
終点のマーカーurl
marker
始点・頂点・終点共通のマーカーurl(サポートするブラウザは無い?)

markerUnitsの設定例

strokeWidth userSpaceOnUse

マーカーの描画位置の確認例

orient属性に依るマーカー角度の設定例

複数の線を単一のpath要素で定義した場合,marker-start,marker-endによるマーカーはpath要素全体の起点と終点にのみ描画される.

両矢印の描画とauto-start-reverse値

始点と終点とでマーカー図形を180°反転させたい場合, SVG2をサポートしている環境であればorient属性に「auto-start-reverse」を指定する事が出来る. 下は両矢印を描画する例である.

SVG2をサポートしていない場合は始点用と終点用の2つのマーカーを定義する必要がある.その際にuse要素を使うことでマーカー図形の定義を一箇所に集約することが出来る.

描画順の制御

一般的な図形要素については「fill」「stroke」「markers(textを除く)」の3つの描画対象が存在するが, これらの描画は通常「fill→stroke→markers」の順に行われる. この順はpaint-order属性で変更することが可能だ.

paint-order
オブジェクトの描画順を指定する. fill/stroke/markersを描画順に記述するか, normal(通常・規定値)/inherit(親から継承)のどちらかを指定する.

線とマーカーの色の共通化

線の色とマーカーの色とを共通化したい場合は,marker要素と線の要素とをg要素で囲み,color属性による色の一括設定を行うと良い.

多くの線を記述する必要があっていちいちmarker要素を定義するのが面倒な場合は,矢印線の生成は黒色で行い色の変更を後述するfilterで行う手も考えられる.

折れ線グラフへの応用

marker要素に依る図形の配置は原則端点及び頂点に限られてしまうため,一般的に行われている折れ線の各線分にマーカーを配置するといった用途には向かない.が,次のようにマーカー専用の線分を別途重ねることで擬似的に実現することは出来る.

このようなグラフの出力にはスクリプトを用いるのが通常であるため,線分の中点を求めるのはそれほど難しくないはずだ.しかしこの作業は本質的にuse要素を使って図形の配置を行なっているのとなんら変わりがないため,無駄なpolyline要素が配置される分冗長と言える.このコードをuse要素で書きなおしてみよう.

折れ線へのマーカーの適用はsvg2にて改善される予定である.