SVGで格子模様を描くコツ
| 日付 | 2011/07/01 |
|---|---|
| ID | 76363 (英語原文参照) |
| バージョン | v12 |
| プラットフォーム | Mac/Win |
グラフの背景などにSVGでグリッド（方眼）を描画する場合, 無数のライン要素を引くのもひとつの方法ですが, パターンを上手に使用したほうがよりスマートです。
たとえば下記のようなグリッドを描画する場合, 縦と横に10本ずつ, 20本の線を描画することもできますが, 最初に四角形をパターンとして定義し, これを別の四角形の中でペイントサーバーとして参照すれば, 四角形がリサイズされたとしても, それに連動してグリッドも拡大縮小されます。ライン要素を描画した場合, 線の間隔をその都度, 再計算しなければなりません。
$X_L:=0
$Y_L:=0
$X2_L:=200
$Y2_L:=100
For ($Ndx;0;10)
SVG_New_line ($SVG_T;$X_L+($Ndx*20);$Y_L;$X_L+($Ndx*20);$Y2_L;"blue";0.5)
SVG_New_line ($SVG_T;$X_L;$Y_L+($Ndx*20);$X2_L;$Y_L+($Ndx*20);"blue";0.5)
End for
$MyPat_T:=SVG_Define_pattern ($SVG_T;"myGrid";20;20;0;0;"userSpaceOnUse")
SVG_New_rect ($MyPat_T;0;0;20;20;0;0;"blue";"none";0.3)
SVG_New_rect ($SVG_T;0;0;200;100;0;0;"";"url(#myGrid)";0.3)