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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

svgはDOM構造で構成されている事がわかりますが、画像編集ソフトなどで作成されたsvgの中身をテキストエディタでのぞいてみると、xml形式で書かれている事がわかります。
 

そのxmlはヘッダこそxmlになってますが、中に記述されているsvgタグをそのままhtmlに貼り付けると、きちんとsvg画像が表示されるのも、このフォーマットの扱いやすいポイントだと思います。
 

そして、ほとんどの画像エディタで作られたsvgデータは、”g”タグと”path”タグで構成されているのですが、今回は”g”タグについて学習してみます。

グループのG

“gタグ”は、見てわかる通り「グルーピング」の頭文字のgです。
 

svgのDOM構造で、一定のシェイプ群をひとまとめにして、それらのtransformをコントロールする事ができる便利タグなんですね。
 

使い方も簡単で、下記のように、シェイプタグをwrapするように記述してあげるだけで、グルーピングできます。
 

この時に、”gタグ”の中に”gタグ”を記述することもでき、深いネストにも対応しています。
 

注意点!
 

“gタグ”はhtmlでのdivタグに似ています。
他階層を取りまとめる役割をして、その内部の構造をwrapしてくれるのですが、座標コントロールはx,yではなく、transform-translateしか使えないという点と、”gタグ”自体はサイズを持っていないという点に注意しましょう。
 

どうやら、divタグいうよりも、spanタグに近いですね。
“display:block”よりも、”display:inline”という感じです。
 

そして、”gタグ”には、classやid属性などを設置する事ができるので、cssでのhoverなどでコントロールする事が可能です。

次回予告

javascriptのイベントと連動したsvgの効果を学習して、インタラクティブなsvg描画を行なってみます。

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」
 

SVG学習 2日目「基本描画」
 

SVG学習 3日目「Javascriptで描画」
 

SVG学習 4日目「テキストと画像ファイルの挿入」
 

SVG学習 5日目「SVGアニメーション」
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です