svgはDOM構造で構成されている事がわかりますが、画像編集ソフトなどで作成されたsvgの中身をテキストエディタでのぞいてみると、xml形式で書かれている事がわかります。
そのxmlはヘッダこそxmlになってますが、中に記述されているsvgタグをそのままhtmlに貼り付けると、きちんとsvg画像が表示されるのも、このフォーマットの扱いやすいポイントだと思います。
そして、ほとんどの画像エディタで作られたsvgデータは、"g"タグと"path"タグで構成されているのですが、今回は"g"タグについて学習してみます。
グループのG
"gタグ"は、見てわかる通り「グルーピング」の頭文字のgです。
svgのDOM構造で、一定のシェイプ群をひとまとめにして、それらのtransformをコントロールする事ができる便利タグなんですね。
使い方も簡単で、下記のように、シェイプタグをwrapするように記述してあげるだけで、グルーピングできます。
<svg width="300" height="200" id="test_1" version="1.1">
<g>
<rect x="0" y="0" width="160" height="160" fill="skyblue" stroke="blue" stroke-width="4"></rect>
<rect x="0" y="0" width="80" height="80" fill="tomato" rx="8" ry="8" transform="translate(80 20) rotate(45)"></rect>
</g>
</svg>
<div id="svg"></div>
<script>
new svgDraw("#svg" , {width:600 , height:200 , id : "test_1" , version : "1.1" , css:"svg.css"} , [
["g" , {} , [
["rect" , {x:0 , y:0 , width:160 , height:160 , fill:"skyblue" , stroke:"blue" , "stroke-width":"4"}],
["rect" , {x:0 , y:0 , width:80 , height:80 , fill:"tomato" , rx:8 , ry:8 , transform:{rotate:45 , translate:{x:80 , y:20}}}],
]]
]);
</script>
この時に、"gタグ"の中に"gタグ"を記述することもでき、深いネストにも対応しています。
<svg width="300" height="320" id="test_1" version="1.1">
<g>
<g>
<rect x="0" y="0" width="160" height="160" fill="skyblue" stroke="blue" stroke-width="1"></rect>
<rect x="0" y="0" width="80" height="80" fill="tomato" rx="8" ry="8" transform="translate(80 20) rotate(45)"></rect>
</g>
<g transform="translate(0,160) scale(0.3)">
<rect x="0" y="0" width="500" height="500" fill="skyblue" stroke="blue" stroke-width="4"></rect>
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" />
</g>
</g>
</svg>
<div id="svg"></div>
<script>
new svgDraw("#svg" , {width:300 , height:320 , version : "1.1"} , [
["g" , {} , [
["g" , {} , [
["rect" , {x:0 , y:0 , width:160 , height:160 , fill:"skyblue" , stroke:"blue" , "stroke-width":"1"}],
["rect" , {x:0 , y:0 , width:80 , height:80 , fill:"tomato" , rx:8 , ry:8 , transform:{rotate:45 , translate:{x:80 , y:20}}}],
]],
["g" , {transform:{translate:{x:0,y:160} , scale:"0.3"}} , [
["rect" , {x:0 , y:0 , width:500 , height:500 , fill:"skyblue" , stroke:"blue" , "stroke-width":"4"}],
["polygon" , {points:"350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" , fill:"red" , stroke:"blue" , "stroke-width":10}],
]]
]]
]);
</script>
注意点!
"gタグ"はhtmlでのdivタグに似ています。
他階層を取りまとめる役割をして、その内部の構造をwrapしてくれるのですが、座標コントロールはx,yではなく、transform-translateしか使えないという点と、"gタグ"自体はサイズを持っていないという点に注意しましょう。
どうやら、divタグいうよりも、spanタグに近いですね。
"display:block"よりも、"display:inline"という感じです。
そして、"gタグ"には、classやid属性などを設置する事ができるので、cssでのhoverなどでコントロールする事が可能です。
次回予告
javascriptのイベントと連動したsvgの効果を学習して、インタラクティブなsvg描画を行なってみます。
0 件のコメント:
コメントを投稿