見出し画像

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

今回こんかいは 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) グループの利用りよう」をごらんください。


この記事が気に入ったらサポートをしてみませんか?