SVGによるベクターグラフィック(1) (5/6)

基本図形の描き方はだいたいわかりましたが、実はこれだけではなかなか思うように描けないのも確かです。例えば、「斜めに傾いた楕円」はどう描くんでしょう？また平行四辺形のような図形は？　多角形や曲線を使ってすべて自分で描くとなるとなかなか大変そうですね。

こうしたときに覚えておきたいのは「図形の座標変換」に関する機能です。SVGには、表示されいる座標を一定のルールに従って変換する仕組みがあるのです。これを利用することで、図形を移動したり、拡大縮小したり、回転したり、一箇所をびよ〜んと引き伸ばしたりといった、さまざまな操作が行えます。

これは、「transform」という属性として用意されています。図形のタグに、tarnsform="◯◯"という形で座標変換の情報を記述すれば、その図形は変換された状態で表示されることになります。

では、この"◯◯"のところに記述される返還の情報は？　これは、用意されているいくつかの指定方法を使って記述します。これは、JavaScriptの関数のような形式になっており、変換の名前と必要なパラメータを記述します。用意されている変換の名前は以下のようになります。

平行移動
文字通り、図形をそのままの形で縦や横に位置を移動させるものです。縦横の移動量（ドット数）を指定します。

translate( 横方向の移動量 , 縦方向の移動量 )

拡大縮小
図形の拡大縮小をするものです。引数１つなら、縦横等倍に拡大し、２つなら縦横の倍率をそれぞれ設定します。いずれも１が等倍で、それより小さければ縮小され、大きければ拡大されます。

scale( 拡大率 )
scale( 横方向の拡大率 , 縦方向の拡大率 )

回転
図形を回転します。これは回転する角度と、図形のどの場所を回転の中心点とするかを指定します。角度はラジアンではなく度数です。

rotate( 回転角度 , 中心の横位置 , 中心の縦位置 )

変形
これは、四角形を引っ張って平行四辺形にするようなものです。横・縦のそれぞれの方向に変形するものが用意されています。引数には、傾く角度（度数）を指定します。

skewX( 横方向に変形する角度 )
skewY( 縦方向に変形する角度 )

行列変換
３×３の変換行列を使って変換をします。座標軸の変換をするための行列を用意します。

matrix( 値1 値2 値3 値4 横位置 縦位置 )

行列変換はよくわからないでしょうが、これはその他の変換を組み合わせて可能なものなのでわからなくても問題ありません。では、実際の利用例を下のリスト欄に掲載しておきます。四角形を少しずつ変換したものを表示しています。x, y, width, heightによる位置と大きさはすべて同じですが、こんな具合にすべて少しずつ変化して描かれるのがわかります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※SVGのサンプル

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="300px" 
		xmlns="http://www.w3.org/2000/svg">
	<g fill="red" stroke="blue" stroke-width="2px">
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(20,10) scale(0.9) 
			rotate(20,0,0)" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(40,20) scale(0.8) 
			rotate(40,0,0)" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(60,30) scale(0.7) 
			rotate(60,0,0)" />
		<rect x="150px" y="20px" width="150px" 
			height="75px"  opacity="0.5"
			transform="translate(80,40) scale(0.6) 
			rotate(80,0,0)" />
	</g>
</svg>