みかづきブログ・カスタム

基本的にはちょちょいのほいです。

clip-pathを使ってSVGをマスクとして使いつつ、マスクをアニメーションさせる 😷

DEMO


解説

clip-pathにSVGのID(正確にはSVG内の図形のID)を渡してあげればその図形をマスクにすることができます。

developer.mozilla.org

また、SVGもタグなのでCSSアニメーションで動かすことができます。
そうすると、合わせ技でマスクをアニメーションさせることができるのです。

注意事項としては以下の通りです。

❶ SVGをdisplay: noneにしない

SVGをdisplay: noneにするとマスクが効かなくなります。
僕は、幅・高さを0にしつつ、positionをfixed(もしくはabsolute)にすることで、他の要素への影響をなくしています。

svg {
  position: fixed;
  width: 0; height: 0;
}

❷ defsで囲うと行儀が良い

参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されているようです。

developer.mozilla.org

❸clipPathにtransformを掛けるときは単位不要

単位不要です。

<clipPath id="star" transform="translate(16, 16)"></clipPath>

developer.mozilla.org



こういう表現をする際はいつもCanvasを使っていたのですが、単純なアニメーションならclip-pathの方が簡単そうです。