図形(ずけい)のグループ化(か)

今回こんかいは SVG の図形ずけい要素ようそをグループ化かして配置はいちしてみました。

星空ほしぞらとロケットをそれぞれグループとして定義ていぎし、useユーズ 要素ようそで配置はいちしました。

実行じっこう結果けっかは以下いかのようなイメージです。

実行じっこう結果けっか

星ほしはこんな風ふうに作つくっています。星ほしの位置いちを xエックス と yワイ に乱数らんすうで決きめ、starsスターズ というグループに追加ついかしています。

    for (i = 0; i < max; i++) {
        var x = Math.floor(Math.random() * xmax + size / 2);
        var y = Math.floor(Math.random() * ymax + size / 2);
        stars.ellipse(size, size).cx(x).cy(y).fill('#ffffff').stroke('none');
    }

この stars というグループを後あとで参照さんしょうして配置はいちしています。

    //<use xlink:href="#stars" x="0" y="0"/>
    draw.use(stars).move(0, 0);

詳細しょうさいはブログ「JavaScript (52) グループの利用りよう」をご覧らんください。