最近はあんまりHTML5とかCanvasとか、SVGとか聞かなくなってきた気がするんですが、もう十分に広がって普通になったからなんでしょうかね。
仕事の関係でSVGをさわることになりそうだったので、自分でちょっと調査してたらなかなか面白そうだったので、時計を作ってみました。SVGというとアナログ時計の例をよく見た気がしますが、これはデジタルです。
→SVG Watch Demo(上の画像クリックでも飛びます。)
以下説明など。
難しいことをしているように見えるかもしれないですが、難しい部分はほとんどないです。
線の動きについてはこちらを参考にしました。
→ASCII.jp：SVG線画が美しいリッチアニメーションの作り方 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン
ここに書いてあるものをjQueryで書いて、時計表示してみただけなんで、説明は以上になります。非常に簡単です。stroke-dasharrayとstroke-dashoffsetの組み合わせは強力ですね…。
ざっくり見た感じではモダンブラウザではだいたい表示できてると思います。スマホだと、iOSはまだマシですが、Androidだと時計の表示が少しおかしいです。あと重いです。
IE9での環境がIE11の表示モード変更程度でしか見れてませんが、一応IE9でも普通に見えていました。IE8はSVGに対応していないので、そのままでは動かない感じですね。(Raphaëlなんかを使って動かす感じになるかと思います。)
テストしてみる前は、テキストの線のアニメーションは難しいかと思っていたのですが、案外そのまま動きました。しかもWebFontで。(GoogleFontsの「Audiowide」を使っています。)
svg.jsやSnap.svgなんかも検討したんですが、この位のものであれば必要はなさそうかなという印象でした。位置を変えてアニメーションさせたりすると必要になる感じなんでしょうか。
参考リンク