質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

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

yoshi9000
yoshi9000

総合スコア1

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0評価

0クリップ

252閲覧

投稿2022/02/22 03:17

編集2022/02/26 02:02

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

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

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

〇該当のソースコード

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>止まったSVGでの切り抜きには成功 最初の画像</title> <style> .bgi { -webkit-mask-image: url(./mask_path.svg); mask-image: url(./mask_path.svg); -webkit-mask-size: contain; mask-size: contain; mask-repeat: no-repeat; } </style> </head> <body> <div class="bg"> <img class="bgi" src="./free0.jpg" alt=""> </div> </body> </html>

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

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>maskを使って切り抜こうとした例 未完成</title> </head> <body> <style type="text/css"> .mask_stroke { fill: none; stroke: #999; stroke-miterlimit: 10; } #mask_line { stroke-dasharray: 2320pxpx; stroke-dashoffset: 2319px; animation: h-written 6s; } @keyframes h-written { 0% { stroke-dashoffset: 2319px; } 100% { stroke-dashoffset: 0px; } } #logo { mask: url(#mask-animation); } </style> <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"> <g id="logo"> <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" /> </g> <mask id="mask-animation"> <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" /> </mask> </svg> </body> </html>

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

HTML

<h1>動かないSVG</h1> <svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204"> <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" /> </svg> <h1>animationのあるSVG</h1> <svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204" class="" style=""> <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> <style data-made-with="vivus-instant"> .zXmcYVJG_0 { stroke-dasharray: 2318 2320; stroke-dashoffset: 2319; } .start .zXmcYVJG_0 { animation: zXmcYVJG_draw 3000ms ease-in-out 0ms forwards; } @keyframes zXmcYVJG_draw { 100% { stroke-dashoffset: 0; } } @keyframes zXmcYVJG_fade { 0% { stroke-opacity: 1; } 94.44444444444444% { stroke-opacity: 1; } 100% { stroke-opacity: 0; } } </style> </svg>

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

int32_t

2022/02/22 03:34

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。