質問: ### SVGアニメーションを滑らかに表示する http://www.tam-tam.co.jp/tipsnote_sample/uenaka/151207/index2.html こちらのsvgアニメーションのように滑らかに処理をしたいです。 コードの内容はほぼそのままでvaluesの値のみイラレから書き出した実装したい形に書き換えたのですがコマ送りのような描画しかできず滑らかなアニメーションになりません。 一通りSVGについて調べましたが基本的な部分が分かってない節があるので、解決方法と合わせてなぜこのようになるかもご教授頂けると助かります。 宜しくお願い致します。 ### 該当のソースコード ``` ``` ### 試したこと アトリビュートにvaluesではなくfromとtoを使った場合でも同じようになりました。 ### 補足情報 使用ブラウザはChromeの最新版です。
回答: SMIL(SVGアニメーション)を用いてpath要素の形状をアニメーション化する場合は, アニメーション開始時と終了時のパス文字列(d属性の内容)の形式(コマンドの種類や数)が一致している必要があります. これはSVGアニメーションがパス文字列に含まれる数値成分を線形補間することでアニメーション途中のパス形状を決定するからです. 上記の例では, 途中で一方はsコマンドを,もう一方はcコマンドを使ってしまっています. ``` M892.5,334.5c0,0-208.807-68.98-407.822,0s-418.178,0-418.178,0,v-183h826V334.5z M892.5,334.5c0,0-184.131-154.046-407.822,0c-223.691,154.046-418.178,0-418.178,0v-183h826V334.5z ``` そのため, パス文字列を分析した際にアニメーション化不可能と扱われ, 結果「コマ送り」アニメーションに強制されています. さて, 解決策については2つあります. * 図形の形状を維持するようにパス文字列の構造を揃える 自力で行うことも出来ますが, パス文字列が読めないと難しいかもしれません. 一方Illustratorにそのような機能があれば簡単です. * Snap.svgを用いたアニメーションを行う パス構造を揃える機能を備えているため, パスのアニメーション化が容易です.