SVG うねうね【日記 2019/08/22】

前回日記に書いた、仕事で必要なリアルタイムの絵の生成の話。

Canvas で生成したり、CSS でアニメーションしたりするのは以前からよくやっているのだけど、SVG でアニメーションする必要があった。

これが僕にとっては未知の技術だったので、今回のデモでは「あらかじめ作った絵でごまかす」を選んだのだった。

SVG でアニメって、SMIL とかいう技術を使うんだよな…と思っていたら、今は SVG + CSS Animation もできるらしい。

僕の知識がすでに古かった。

で、やりたいことを CSS Animation でやってみたら、できなかった。

CSS だと、単純な移動とかはできても、path を動かしたりは融通が利かない。

（アニメ自体はできるけど、制御が利かずに思ったようには動かない）

じゃぁ、SMIL ならできるのか、と調べると、こちらも単純な移動程度。

結局、1コマづつ画像を生成して、連続表示するという泥臭い方法をとるしかないことを知った。

仕方なく泥臭い方法で作ったら、思い通りに動いた。

思ったよりは簡単だった。

作ったのは、データに応じてリアルタイムに動く円グラフと、棒グラフと、ベジェによる曲線グラフ。

SVG 、今までややこしそうで避けていたのだけど、理解してみたら便利だな。

回路図程度なら、画像を描くよりも SVG で入れてしまった方が楽かもしれない。

2019年08月22日の日記です