風車をまわしてみる

はじめに

SVG animation 記事の2回目になります。
今回は、風車がゆるやかに回転するアニメーションを作ります。

SVG animation 記事の1回目では、三角形の中心を軸に回転するアニメーションをご紹介しました。

風車を使った作品は、NFTコレクションにしていますので、ぜひ、ご覧ください。リンクは私のクリエイターページに記載しています。

風車をつくる

以下の画像をご覧ください。
二等辺三角形を組み合わせて風車を作ってみました。

回転軸を明確にするため、風車の中心に円を描いています。
1回目の記事をご覧になられた方は、もうおわかりですね。
1回目は三角形の中心に円を描いてそれを軸に三角形を回転させました。この時と同じ要領で作りますが、それだと1回目の記事と同じような内容になってしまうので、今回は、この風車を複製し横に並べてみます。

以下、完成したSVG画像になります。
「Run Pen」を押すと、風車が３つ並んで、回転する様子が確認できるかと思います。
HTMLボタンでコードを確認してみてください。

コードの説明

では、このSVG画像を構成するコードについて説明していきます。
今回のポイントは、<symbol>要素と<use>要素になります。
三角形を描くコードは、1回目の記事で説明しましたので、今回は省略します。1回目の記事をご確認されたい方は以下を参照ください。

symbol要素とuse要素

まずは、<symbol>要素から。
<symbol>要素は、<use>要素で使用する画像のテンプレートを定義します。
つまり、<symbol>から</symbol>に囲まれた図形を、<use>要素で再利用することができるようになります。同じ画像を使いたい場合、何度も同じコードを書くことを回避できます。

では、コードの説明をします。

今回のコードは、以下のような構成になっています。

＜ｓｖｇ＞

<symbol id="windmill">
  :
 ここに、風車を描画するコードとアニメーションのコードが書かれています。
  :
</symbol>
  :
 <symbol>要素で定義した図形を使う<use>要素が書かれています。
  :
</svg>

<symbol>要素では、<use>要素で参照する名称（id）を定義します。

<symbol id="windmill">

ポイントはこれだけです。この名称を、<use>要素で使用します。
他は、風車を描くコードとそれを回転させるコードになります。
ちなみに、<symbol>要素は定義なので画像は表示されません。

次は、<use>要素です。
以下のようになっています。

<svg viewBox="0 0 250 250" x="10" y="10" width="100" height="100">  <use id="m1" xlink:href="#windmill"/> </svg>
<svg viewBox="0 0 250 250" x="100" y="10" width="100" height="100"> <use id="m2" xlink:href="#windmill"/> </svg>
<svg viewBox="0 0 250 250" x="200" y="10" width="100" height="100"> <use id="m3" xlink:href="#windmill"/> </svg>

<use>要素では、名称を定義する「id」と<symbol>要素で定義した図形を参照する「xlink:href="#windmill"」を書いています。「id」の値は、任意のものでかまいません。
重要なのは、「xlink:href="#windmill"」で、ここで、<symbol>で定義した名称を指定します。この時、名称に「#」をつけます。

また、今回は、<svg>と</svg>で<use>要素を囲みました。
これで、位置や大きさを指定することができるようになります。
このSVGコードでは、100px × 100px の表示領域に、viewBoxを重ねています。表示領域とviewBoxについては、少々、難しいので説明はまたの機会にしたいと思います。

ここで、確認ただきたいのは、x="10"、x="100"、x="200"の部分です。
x座標をずらすことで横１列に風車を配置しています。

いかがでしょうか。少しはご理解いただけたでしょうか。
多少、難しいところもありますので、今回は、こんな感じというレベルでも十分かと思います。

今回は、以上です。