質問編集履歴

2

必要内容の追加

2022/02/22 04:31

投稿

yoshi9000
yoshi9000

score1

test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,9 @@
36
36
  </body>
37
37
  </html>
38
38
  ```
39
+ 結果
40
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-22/a5d51c0f-2429-44ce-898e-84a02d2521da.png)
41
+ 下記のHTMLは少し条件は違いますがsvgの下のsvgのパスを少しずつ表示させようとmaskタグを使って試みたものです
39
42
  ```HTML
40
43
  <!DOCTYPE html>
41
44
  <html lang="ja">
@@ -95,6 +98,11 @@
95
98
  </html>
96
99
 
97
100
  ```
101
+ 結果
102
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-22/d410a087-fa42-4cda-8de8-4df8e9679935.png)
103
+ 下記のsvgデータはadobeXDを使って製作しました
104
+ 動かないsvgとアニメーションのついたsvg両方用意しました。
105
+ [動きを付けるために使ったサイトはこちらです](https://maxwellito.github.io/vivus-instant/)
98
106
  ```HTML
99
107
  <h1>動かないSVG</h1>
100
108
  <svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204">

1

必要な情報の追加

2022/02/22 04:18

投稿

yoshi9000
yoshi9000

score1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,6 @@
1
+ 下の画像は現状の画像です
2
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-22/a5d51c0f-2429-44ce-898e-84a02d2521da.png)
3
+
1
4
  〇前提・実現したいこと
2
5
  CSSを使ってsvgのアニメーションを使って、svgの後ろに配置している文字が書いてある画像(ロゴ)をマスクして、書いているように表現したい
3
6
 
@@ -6,15 +9,15 @@
6
9
  animationがついたSVGで実現したい なにで躓いているのかわからない
7
10
  maskタグをつかって実装している方もいたがVScodeでエメットが効かないため記述に問題があるのかもしれない
8
11
 
9
- 〇該当のソースコード(ここまではできた)
12
+ 〇該当のソースコード
10
-
13
+ ```HTML
11
14
  <!DOCTYPE html>
12
15
  <html lang="ja">
13
16
  <head>
14
17
  <meta charset="UTF-8" />
15
18
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
16
19
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
- <title>SVG一筆書き</title>
20
+ <title>止まったSVGでの切り抜には成功 最初の画像</title>
18
21
  <style>
19
22
  .bgi {
20
23
  -webkit-mask-image: url(./mask_path.svg);
@@ -32,11 +35,115 @@
32
35
  </div>
33
36
  </body>
34
37
  </html>
38
+ ```
39
+ ```HTML
40
+ <!DOCTYPE html>
41
+ <html lang="ja">
42
+ <head>
43
+ <meta charset="UTF-8">
44
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
45
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
46
+ <title>maskを使って切り抜こうとした例 未完成</title>
35
47
 
48
+
49
+ </head>
50
+ <body>
51
+
52
+ <style type="text/css">
53
+ .mask_stroke {
54
+ fill: none;
55
+ stroke: #999;
56
+ stroke-miterlimit: 10;
57
+ }
58
+
59
+ #mask_line {
60
+ stroke-dasharray:
61
+ 2320pxpx;
62
+ stroke-dashoffset:
63
+ 2319px;
64
+ animation:
65
+ h-written 6s;
66
+ }
67
+
68
+ @keyframes h-written {
69
+ 0% {
70
+ stroke-dashoffset:
71
+ 2319px;
72
+ }
73
+
74
+ 100% {
75
+ stroke-dashoffset:
76
+ 0px;
77
+ }
78
+ }
79
+
80
+ #logo {
81
+ mask:
82
+ url(#mask-animation);
83
+ }
84
+ </style>
85
+ <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">
86
+ <g id="logo">
87
+ <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" />
88
+ </g>
89
+
90
+ <mask id="mask-animation">
91
+ <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" />
92
+ </mask>
93
+ </svg>
94
+ </body>
95
+ </html>
96
+
97
+ ```
98
+ ```HTML
99
+ <h1>動かないSVG</h1>
100
+ <svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204">
101
+ <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" />
102
+ </svg>
103
+
104
+ <h1>animationのあるSVG</h1>
105
+ <svg xmlns="http://www.w3.org/2000/svg" width="806.76" height="563.204" viewBox="0 0 806.76 563.204" class="" style="">
106
+ <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>
107
+ <style data-made-with="vivus-instant">
108
+ .zXmcYVJG_0 {
109
+ stroke-dasharray: 2318 2320;
110
+ stroke-dashoffset: 2319;
111
+ }
112
+
113
+ .start .zXmcYVJG_0 {
114
+ animation: zXmcYVJG_draw 3000ms ease-in-out 0ms forwards;
115
+ }
116
+
117
+ @keyframes zXmcYVJG_draw {
118
+ 100% {
119
+ stroke-dashoffset: 0;
120
+ }
121
+ }
122
+
123
+ @keyframes zXmcYVJG_fade {
124
+ 0% {
125
+ stroke-opacity: 1;
126
+ }
127
+
128
+ 94.44444444444444% {
129
+ stroke-opacity: 1;
130
+ }
131
+
132
+ 100% {
133
+ stroke-opacity: 0;
134
+ }
135
+ }
136
+ </style>
137
+ </svg>
138
+
139
+ ```
36
140
  〇自分で調べたことや試したこと
37
141
  ・maskタグを使ってみた
38
142
  ・svgにアニメーションを付けられるサイトを使って動きがついたSVGファイルを
39
143
  使って試した
40
144
 
41
145
  〇使っているツールのバージョンなど補足情報
146
+ svgファイルはadobeXDで制作しています。
42
- VScodeを使って製作しています。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-22/a5d51c0f-2429-44ce-898e-84a02d2521da.png)
147
+ VScodeを使って製作しています。
148
+
149
+ はじめての質問で不十分なところもあると思いますがよろしくお願いします。