質問編集履歴
2
必要内容の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -36,6 +36,9 @@
|
|
|
36
36
|
</body>
|
|
37
37
|
</html>
|
|
38
38
|
```
|
|
39
|
+
結果
|
|
40
|
+
|
|
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
|
+
|
|
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
必要な情報の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
下の画像は現状の画像です
|
|
2
|
+
|
|
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
|
|
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を使って製作しています。
|
|
147
|
+
VScodeを使って製作しています。
|
|
148
|
+
|
|
149
|
+
はじめての質問で不十分なところもあると思いますがよろしくお願いします。
|