はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > HTML > SVG1.1 グループ化について(g, symbol, defs)

SVG1.1 グループ化について(g, symbol, defs)

HTML SVG

SVG1.1 グループ化について(g, symbol, defs)

前回は、SVG で扱える基本図形の話でした。

今回は、SVG1.1 で使えるグループ化についてのメモです。 SVG の各図形は、パワポのグループ化のように、まとめて扱うことができます。

g タグ

g タグ内で図形を呼ぶとグループ化できる。 g タグにfill などの属性を指定すると一括で指定することができる。 また、use タグで位置x y を指定してコピーすることができる。

コピーする際、元のg で指定していない属性であれば、use で指定して属性を追加できる。 以下のサンプルではコピーして、線幅を変えている。

サンプル

コード

        

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <!-- group化 -->
 <g id="g-rec-cir" fill="#e33" stroke="#333">
  <rect x="20" y="20" width="100" height="80"></rect>
  <circle cx="120" cy="50" r="20"></circle>
 </g>
 <!-- stroke, fillは変更できない、 -->
 <use x="130" y="0" xlink:href="#g-rec-cir" stroke-width="3"></use>
</svg>

symbol タグ

g タグでは、g の部分が描画されるが、 symbol は描画されない。 use タグを使って描画する。

g と違って、symbol ではviewbox を指定でき、 use の際、width, height を指定して、拡大・縮小できる。

下のサンプルでは、右のオブジェクトは、半分に縮小して呼んでいる。

サンプル

コード

        

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <symbol id="symb-rec-cir" viewbox="0 0 300 200">
  <rect x="20" y="20" width="100" height="80"></rect>
  <circle cx="120" cy="50" r="20"></circle>
 </symbol>
 <use x="0" y="0" width="300" height="200" xlink:href="#symb-rec-cir" fill="#e33" stroke="#333"></use>
 <use x="150" y="0" width="150" height="100" xlink:href="#symb-rec-cir" fill="#33e" stroke="#ccc" stroke-width="3"></use>
</svg>

defs タグ

defs は、symbolなどの実際に描画しない図形の定義をまとめておく領域である。

可読性やアクセシビリティのために、defs タグの中に、すべての定義をまとめておくことが推奨されているようです。

サンプル

コード

        

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="300" height="200" viewbox="0 0 300 200">
 <defs>
  <symbol id="eye" stroke="#333" viewbox="0 0 300 200">
   <circle cx="30" cy="50" r="30" fill="#fafafa"></circle>
   <circle cx="35" cy="45" r="5" fill="#333"></circle>
  </symbol>
  <symbol id="eyes">
   <use x="20" y="20" width="300" height="200" xlink:href="#eye"></use>
   <use x="100" y="20" width="300" height="200" xlink:href="#eye"></use>
  </symbol>
 </defs>
 <use x="20" y="20" width="300" height="200" xlink:href="#eyes"></use>
</svg>