backINDEXこんばんは。先日たずさわった案件で、SVGにcssアニメーションを付けました。私、普段のメインブラウザChromeなのですが、いざ実装して確認してみると、IE/edgeで。transformが効いてない!safari(9)で。なんかずれてる!という悲しい事態に。いうわけで、備忘録兼ねて、実装時のTIPSを共有したいと思います。準備まずはSVGの素材を用意しましょう。MONOさんより、エビの素材をお借りしました。(初期表示がナナメになっているのでサンプルとしては不向きだったなと、書きながら気づきました。爆).svg形式でDLしたら、イラレで開きましょう。(私のMacのイラレが古いのはスルーしてください)ナナメだとわかりづらいので、回転させて上を向かせちゃいましょう。(←)動かす分の余白を考慮して、キャンバスサイズ512pxに対してエビの体長は480pxにしました。キャンバスの中央に配置したら準備OKです。レイヤーのグループ化レイヤーがバラけているので、動かしたい単位でグループ化していきます。選択ツールの状態で、「Shift+クリック」で複数選択し「Cmd+G」でグループとしてまとめることが出来ます。動かしたい単位でグループを分けたら、グループ/レイヤーにidとなる名前をつけていきます。アンダーバーは文字化けするので、ハイフンを使いましょう。必要な箇所だけになるよう(短く・見やすくするよう)コードを整形したら、htmlに貼り付けます。イラレで名前をつけたグループは通常idで出力されますが、サンプルではclassに置き換えています。512pxをまま表示すると大きすぎるので、wrapperに128pxを設定しています。CodePen.アニメーションアニメーション自体は、簡単なcssのkeyframeアニメーションを使ってつけていきます。右手(.handR)の回転は、下記のようにtransform:rotate()の値を変化させているだけです。.shrimpに.-animeがつくと、アニメがつく想定です。infinite;}このようにtransformで動きをつける場合、回転軸(transform-origin)の設定がポイントになります。(50%,50%)ですが、SVGの中身(<path>や<g>)の場合、transform-originの初期値はキャンバス内の(0,0)になっているため、transformをかけただけでは意図した動きになってくれません。(こちらの記事が参考になります)そこで、回転軸としたい座標を、キャンバス内での相対位置に変換してあげましょう。(簡単に言うと、ここを基準にしたい!という座標を、キャンバスサイズで割れば良い)座標の取得には再びイラレを使います。回転軸にしたいパーツを選択して、「基準点」パネルから座標を確認することが出来ます。腕を動かすとき、人間でいうと肩から動くのが自然ですよね。いうことで、胴体から出ている関節パーツの、左下を基準点として回転軸を設定していきたいと思います。50.528125%ずれると厄介なので、ここは嫌がらず小数点も含めて計算してあげます。CodePen.ブラウザによる不具合さて、今皆さまはこちらのブログを何でご覧いただいているでしょうか。Chromeとfirefoxの方は、エビの右ハサミが、関節(人間でいうところの肩)から動いているように見えるかと思います。古いsafariで見ている方は、なんだかエビがワキワキしているような動きに見える方がいるかと思います。調べてみた結果、これらは下記が原因でないかという推測に至りました。IE/edgeは、SVG要素ならtransformを扱えるものの、SVGの中身の<path>や<g>にはtransformを適用できない最新環境でないsafari※では、tranform-originの設定がうまく出来ない※iOS11のsafariでも同様の現象になった方がいたようで、こちら参考にtransform-boxの値をセットしたら解決するかと思ったのですが、古いsafari(9)だと-webkit-prefixをつけても、そもそもプロパティ自体認識されませんでした。解決策SVGで扱えるようにしてあげれば、とりあえず全ブラウザカバー出来るさて、全ブラウザでtransform-originを適用するにはどうしたらよいものか、、至った結論は、「<g>タグでかこっているものを、SVGに分割する」です。動かしたいパーツを、グループではなく単独のSVGとして書き出して、「複数グループで構成される1つのSVG」から、「複数SVGで構成される1つの要素」に変えてあげます。(レイヤーを重ねるイメージ)SVGを分割する下記の手順で構造をかえていきます。1先ほど整形したsvgデータをグループ分複製し、書き出したいパーツのみ残して保存していきます。group名として指定していたidは、(最上位の)SVG自体のidになるよう設定します。▪キャンバスサイズは各SVGすべて同じにしておくと、位置揃えがラクです。▪座標をとるためにSVG化するので、なかにgroupがあっても問題ありません。position:relative;を設定します。(親コンテナのサイズが変わっても大丈夫)4先ほど設定したアニメと同様の方法で、transform-originを設定します。1右手だけのSVGを作成これで、無事全ブラウザでtransform-originがきいて、動くようになりました!とりあえず一安心。CodePen.注意SVG化した場合でも、IEではfillなどSVGの中身に対してのcssでの状態変化は適用できないようですので、お気をつけ下さい。繊細・複雑なアニメーションをしたい場合には、jsやライブラリを使うほうが扱いやすいのが現状かもしれませんが、(TweenMaxはブラウザ間のtransform-origin問題を吸収してくれるよ〜っていう記事)html+cssで、ちょっとしたSVGアニメーションを実装したいな〜という際には、こちらのTIPS、お役に立つ場面あれば幸いです。backNEXTRECOMMENDBLOG2019/03/19@extendを使いこなすためにみなさまこんにちは。コーダーのtabataです。最近、Sassの@extend...BLOG2018/01/17symbolタグとuseタグを使って、好きなところにSVGを表示しよう!もうすっかり定番となって、使わない機会はないぐらいになってきたSVG。...BLOG2019/04/05SASSで3次ベジェ曲線の関数を作ってみたこんにちは!エンジニアのsuganoです。アニメーションの表現の幅を広げたい!...CONTACTお仕事のご相談や、弊社についてのご質問やご要望など、お気軽にお問い合わせください。PolicyRECRUITEVOWORXでは、一緒に良いものづくりをしてくれる仲間を募集しています。詳しくは採用サイトをご覧ください。