〇前提・実現したいこと
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を使って製作しています。
はじめての質問で不十分なところもあると思いますがよろしくお願いします。

回答1件
あなたの回答
tips
プレビュー