html&css　animationのついたsvgで後ろの画像をスクラッチカードを削るように表示したい

下の画像は現状の画像です
イメージ説明

〇前提・実現したいこと
CSSを使ってsvgのアニメーションを使って、svgの後ろに配置している文字が書いてある画像（ロゴ）をマスクして、書いているように表現したい

〇発生している問題・エラーメッセージ
止まっているsvgデータ（animetionしないsvg）では、なぞった部分だけマスクで切り抜くことはできた
animationがついたSVGで実現したい　なにで躓いているのかわからない
maskタグをつかって実装している方もいたがVScodeでエメットが効かないため記述に問題があるのかもしれない

〇該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>止まったSVGでの切り抜きには成功　最初の画像</title>
8    <style>
9        .bgi {
10            -webkit-mask-image: url(./mask_path.svg);
11            mask-image: url(./mask_path.svg);
12            -webkit-mask-size: contain;
13            mask-size: contain;
14            mask-repeat: no-repeat;
15        }
16    </style>
17
18</head>
19<body>
20    <div class="bg">
21        <img class="bgi" src="./free0.jpg" alt="">
22    </div>
23</body>
24</html>

結果
イメージ説明
下記のHTMLは少し条件は違いますがsvgの下のsvgのパスを少しずつ表示させようとmaskタグを使って試みたものです

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>maskを使って切り抜こうとした例　未完成</title>
8
9
10</head>
11<body>
12
13    <style type="text/css">
14        .mask_stroke {
15            fill: none;
16            stroke: #999;
17            stroke-miterlimit: 10;
18        }
19
20        #mask_line {
21            stroke-dasharray:
22                2320pxpx;
23            stroke-dashoffset:
24                2319px;
25            animation:
26                h-written 6s;
27        }
28
29        @keyframes h-written {
30            0% {
31                stroke-dashoffset:
32                    2319px;
33            }
34
35            100% {
36                stroke-dashoffset:
37                    0px;
38            }
39        }
40
41        #logo {
42            mask:
43                url(#mask-animation);
44        }
45    </style>
46    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="806.759" height="563.201" viewBox="0 0 806.759 563.201" style="enable-background:new 0 0 806.759 563.201;" xml:space="preserve">
47        <g id="logo">
48            <path d="M479.759,759.4s.518-512.888,160.755-512.888S733.036,770.339,853.4,759.4s101.816-512.89,239.06-512.89S1236.18,759.4,1236.18,759.4" transform="translate(-474.754 -241.51)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="30" />
49        </g>
50
51        <mask id="mask-animation">
52            <path id="mask_line" class="mask_stroke" d="M479.759,759.4s.518-512.888,160.755-512.888S733.036,770.339,853.4,759.4s101.816-512.89,239.06-512.89S1236.18,759.4,1236.18,759.4" transform="translate(-454.734 -221.51)" fill="none" stroke="#fff" stroke-width="50px" />
53        </mask>
54    </svg>
55</body>
56</html>
57

結果
イメージ説明
下記のsvgデータはadobeXDを使って製作しました
動かないsvgとアニメーションのついたsvg両方用意しました。
動きを付けるために使ったサイトはこちらです

HTML
1<h1>動かないSVG</h1>
2<svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204">
3    <path d="M479.759,759.4s.518-512.888,160.755-512.888S733.036,770.339,853.4,759.4s101.816-512.89,239.06-512.89S1236.18,759.4,1236.18,759.4" transform="translate(-454.734 -221.51)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="50px" />
4</svg>
5
6<h1>animationのあるSVG</h1>
7<svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204" class="" style="">
8    <path d="M479.759,759.4s.518-512.888,160.755-512.888S733.036,770.339,853.4,759.4s101.816-512.89,239.06-512.89S1236.18,759.4,1236.18,759.4" transform="translate(-454.734 -221.51)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="50px" class="zXmcYVJG_0"></path>
9    <style data-made-with="vivus-instant">
10        .zXmcYVJG_0 {
11            stroke-dasharray: 2318 2320;
12            stroke-dashoffset: 2319;
13        }
14
15        .start .zXmcYVJG_0 {
16            animation: zXmcYVJG_draw 3000ms ease-in-out 0ms forwards;
17        }
18
19        @keyframes zXmcYVJG_draw {
20            100% {
21                stroke-dashoffset: 0;
22            }
23        }
24
25        @keyframes zXmcYVJG_fade {
26            0% {
27                stroke-opacity: 1;
28            }
29
30            94.44444444444444% {
31                stroke-opacity: 1;
32            }
33
34            100% {
35                stroke-opacity: 0;
36            }
37        }
38    </style>
39</svg>
40

〇自分で調べたことや試したこと
・maskタグを使ってみた
・svgにアニメーションを付けられるサイトを使って動きがついたSVGファイルを
使って試した

〇使っているツールのバージョンなど補足情報
svgファイルはadobeXDで制作しています。
VScodeを使って製作しています。

はじめての質問で不十分なところもあると思いますがよろしくお願いします。

int32_t

2022/02/22 03:34

問題を再現すのに必要な情報をすべて開示してください。・mask_path.svg を開示してください・maskタグを使ってみたコードど結果を開示してください・動きがついたSVGファイルとそれを使って試した結果を開示してください。

回答1件

ベストアンサー

まず、質問文にある「アニメーションのついたsvg」は、アニメーションを開始したいタイミングで <svg> に class="start" を足す必要があります。JavaScript のコードが必要です。

mask-image や clip-path に SVG を指定した場合、SVG内のキーフレームアニメーションは動かないと思いますので、SVG をマスクや画像データとして利用するのではなく、ページ内にマークアップを埋め込んで表示する必要がありそうです。

その SVG 内で <feComposite in2="SourceGraphic" operator="in"/> で背景画像と合成するフィルタを作って、そのフィルタを <path> から参照します。

サンプルコード

投稿2022/02/24 02:51

編集2022/02/24 03:47

int32_t

総合スコア17892

回答へのコメント

yoshi9000

2022/02/25 17:02

Int32_tさんわざわざサンプルコードまで書いていただきありがとうございました。今回のサンプルコードでsvgのコードについて少し理解が深められたと思います。私の次の目標はアルファベットの筆記体の一筆書きをsvgのanimationを使って再現する事を目標にしています。この度は本当に助かりましたありがとうございました