mkasumi.com


もしかしたら中には難しいことをせずに、画像でマスクしてトリミングしている方もいるかもしれませんが、今回は以下の理由があり、SVGのclipPath要素を使うことにしました。

  • デザイナーさんから手書き風に画像をトリミングしたいという要望があった
  • クライアントがCMSから画像を更新するとき、画像を加工する手間を省きたい
  • パスをモーフィングアニメーションさせたい

子猫の顔が全部見えないのが悲しいですが、クリップパスの実装イメージ


実際のコードは以下のURLからご覧ください。

※Part1のソースコードはなんだかぎこちなかったので、改良したソースコードがPart2になります。

「SVGのclipPath要素を使ってモーフィングアニメーションする」のつづきを読む


Tag:SVG アニメーション 

Posted by 森田かすみ at 13:27  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー