SVG学習 6日目「グループ」

2018年8月17日

SVG テクノロジー プログラミング 特集

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描画を行なってみます。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。