SVGの基礎 4

g要素 グループ化

いくつかの要素をグループ化して属性を共通にすることができる。

<svg width="200" viewBox="0 0 100 100">
    <g fill="grey" stroke="green" stroke-width="3">
        <circle cx="40" cy="40" r="30" />
        <circle cx="70" cy="60" r="15" />
    </g>
</svg>

width="200" は、これが無かったら画面いっぱいに描画するが、これを入れると全体表示サイズを指定できる。 widthとheight両方入れると、どちらか小さい方のパラメータで倍率が決まる。 横幅に合わせたい場合はwidthを高さを合わせたい場合はheightを指定するとよい。

use要素

複製を作る。

<svg width="300" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
    <use href="#myCircle" x="10" fill="yellow" />
    <use href="#myCircle" x="20" y="2" fill="white" stroke="red" />
</svg>

元の要素（図形）に属性が指定されていればその属性が使われ、変更不可になる。 そのため、最後のstroke="red"は無視されていることがわかる。 また、<use>はx,yで相対的位置座標を与えることになっていることに注意。 y="2"は、元図から2だけ下にずれることを意味している。

グループ要素も参照できる。

<svg width="400" viewBox="0 0 200 100">
    <g id="myGroup" fill="grey" stroke-width="3">
        <circle cx="40" cy="40" r="30" />
        <circle cx="70" cy="60" r="15" />
    </g>
    <use href="#myGroup" x="80" stroke="red" />
</svg>

ここでも、変更したい属性は元データから削除しておく必要がある。 def要素を使えば、元データを表示しないようにもできる。

<svg width="600" viewBox="0 0 300 100">
    <def>
        <g id="myGroup2" stroke-width="3">
            <circle cx="40" cy="40" r="30" />
            <circle cx="70" cy="60" r="15" />
        </g>
    </def>
    <use href="#myGroup2" x="10" stroke="red" fill="white"/>
    <use href="#myGroup2" x="90" stroke="blue" fill="yellow"/>
    <use href="#myGroup2" x="170" stroke="green" fill="orange"/>
</svg>

座標変換

拡大縮小

拡大縮小は基本的に2通り存在する。 viewBoxを使う方法とtransform属性のscaleパラメータを使う方法である。

<svg width="80" height="40">
    <rect width="50" height="50" />
</svg>
<svg width="100" height="150" viewBox="0 0 50 50">
    <rect width="50" height="50" />
</svg>
<svg width="100" height="80">
    <g transform="scale(2)">
        <rect width="50" height="50" />
    </g>
</svg>

上記のように3つのSVGを記述すると、

のように表示される。最初の図形は拡大縮小なしであり、widthとheightで描画領域を指定している。 heightが不足しているため、図形の下部分が切れている。 2番目はviewBoxを使って2倍に拡大されている。 widthとheightのどちらか小さい方で、拡大率が決定されている。 たまたまwidthの方が小さいので、それに合わせた拡大率はちょうど2倍になる。 表示領域はwidthとheightで決まるため、heightが大きすぎる分、上に表示がずれている。 3番目はscaleパラメータで拡大率を2倍にしている。 width,heightは表示領域を決めるだけに使われ、heightが不足しているため下の部分が切れている。

縦横の拡大縮小率を変える場合は、scaleパラメータで設定する。

<svg width="500" height="50" >
    <text style="fill:red; stroke:black; font-size:40px;"
        x="30" y="100" transform="scale(1.1 0.4)">
        今日はいい天気ですね。</text>
</svg>
今日はいい天気ですね。

座標変換

移動はtransform="translate(30,40)"、回転はtransform="rotate(45)"のように記述する。 これと拡大縮小を組み合わせれば、多くの座標変換は可能になる。 その他、skewX() と skewY() を使って図形を歪めることもできる。 ひし形はこれを使って正方形を変形するとできる。
matrix(a, b, c, d, e, f)で、一般的な座標変換も可能である。 詳細は割愛する。
参考： Web上に座標変換の詳しい解説がある。

作成日: 更新日:

back    next