SVGのclipPathで画像に動くクリッピングマスクをかける方法

公開日: 2021.03.08
最終更新日: 2026.07.28

写真に、うねうねと形を変えながら動くマスクをかけたい——そんな表現を、SVGだけで実現できます。

結論から言うと、SVGのclipPathの中でanimateを使い、少しずつ歪ませた複数のシェイプのパスを順番に切り替えることで、画像にアニメーションするクリッピングマスクをかけられます。この記事では、シェイプの作り方から書き出しの注意点、アニメーションの設定までを解説します。

1 デモ
2 SVGファイルを作る
3 SVGファイルの書き出し
4 アニメーションの値を設定する
5 ブラウザ対応の補足
6 まとめ

デモ

まずはデモをご覧ください。

デモはこちら

SVGファイルを作る

まず、マスクの元になるシェイプをIllustratorで作ります。シェイプを描き、「効果」→「パスの変形」→「ラフ」で適当に歪ませます。これを、少しずつ形の違う3種類ほど用意します。

いい感じに歪んだシェイプが3種類できたら、それぞれ「オブジェクト」→「アピアランスを分割」しておきます。

※シェイプのアンカーポイント（頂点）の数は、すべて同じにする必要があります。頂点の数が違うと、パス同士をなめらかに補間できず、アニメーションが破綻してしまいます。

SVGファイルの書き出し

できたシェイプを、それぞれSVGファイルで書き出します。ここで1つ注意が必要です。

SVGを生成するとき、パスの中にsコマンドとcコマンドが混ざってしまう（”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

そのまま書き出すとsとcのコマンドが混ざってしまいますが、いったんAI（Illustrator）形式で保存し、その後に別名保存でSVGファイルとして書き出すと、コマンドが統一されてうまくいきました。

アニメーションの値を設定する

できたSVGファイルを、テキストエディターで開きます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 281.19 274.99"><g id="レイヤー_2" data-name="レイヤー 2"><g id="レイヤー_1-2" data-name="レイヤー 1"><path d="M212,204.91C151.17,265.72,90.05,305.51,29.24,244.7S12.05,126.6,72.86,65.79s88.85-84.44,167.49-49.62C317.21,50.21,272.79,144.1,212,204.91Z"/></g></g></svg>

SVGファイル内のpathのdの値をコピーして、サイトに表示するSVGタグのanimateのvaluesに入れます。「SVGファイル1の値;SVGファイル2の値;SVGファイル3の値;SVGファイル1の値;」となるように、それぞれの値をセミコロンで区切ります。

※始点と終点をなめらかにつなげるため、1つめのパス情報を最後にも記述してサンドイッチします。
※dur：アニメーション1回分の時間。5秒なら5s、0.5秒なら0.5sまたは500ms。
※repeatCount：繰り返す回数。ループさせる場合はindefiniteを指定します。

<svg width="1800" height="800">
    <clipPath id="clip">
        <path>
            <animate dur="2s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="
            1;
            2;
            3;
            1
            ">
            </animate>
        </path>
    </clipPath>
    <image clip-path="url(#clip)" width="2000" height="1000" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="マスクをかけたい画像のパス.jpg"></image>
</svg>

animateのattributeName="d"で、パスのd属性を対象にアニメーションさせています。valuesに並べたパスを順に補間しながら切り替えることで、マスクの形が連続的に変化し、うねうねと動いて見える、という仕組みです。