質問編集履歴
1
実現したいこと・発生している問題・試したことに、追記を行いました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
SVGの
|
|
1
|
+
SVGの<mask>で透過度を調整したい
|
test
CHANGED
|
@@ -2,9 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
SVGのPathにマスクをかけ、テキストの透過度を
|
|
5
|
+
SVGのPathに<mask>を利用しマスクをかけ、テキストの透過度を調整したい。
|
|
6
6
|
|
|
7
|
-
※最終的に一筆書きのアニメーションを実現したい。
|
|
7
|
+
※最終的に一筆書きのアニメーションを実現したいためです。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
・透過度を調整される側：<g id="text8105">
|
|
12
|
+
|
|
13
|
+
・マスクに使う側：<mask id="mask">
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
宜しくお願い致します。
|
|
8
18
|
|
|
9
19
|
|
|
10
20
|
|
|
@@ -12,7 +22,9 @@
|
|
|
12
22
|
|
|
13
23
|
|
|
14
24
|
|
|
15
|
-
・<mask></mask>で囲んだPathにマスクがかかるのではなく、
|
|
25
|
+
・<mask></mask>で囲んだPathにマスクがかかるのではなく、全て見えなくなってしまった。
|
|
26
|
+
|
|
27
|
+
・mask: url(#mask);で#text8105を紐づけると、#text8105も見えなくなってしまう。
|
|
16
28
|
|
|
17
29
|
|
|
18
30
|
|
|
@@ -30,7 +42,7 @@
|
|
|
30
42
|
|
|
31
43
|
|
|
32
44
|
|
|
33
|
-
<g aria-label="test" transform="matrix(0.41528567,0,0,0.49893832,-37.501138,-118.91737)"
|
|
45
|
+
<g aria-label="test" transform="matrix(0.41528567,0,0,0.49893832,-37.501138,-118.91737)"id="text8105" style="font-size:74.6667px;line-height:1.25;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;white-space:pre;">
|
|
34
46
|
|
|
35
47
|
<path d="m 274.47267,559.48658 q -1.93229,0.51042 -4.22917,0.83854 -2.26042,0.32813 -4.04688,0.32813 -6.23437,0 -9.47917,-3.35417 -3.24479,-3.35417 -3.24479,-10.75521 v -21.65626 h -4.63021 v -5.76042 h 4.63021 v -11.70313 h 6.85417 v 11.70313 h 14.14584 v 5.76042 h -14.14584 v 18.5573 q 0,3.20833 0.14583,5.03125 0.14584,1.78646 1.02084,3.35417 0.80208,1.45833 2.1875,2.15104 1.42187,0.65625 4.30208,0.65625 1.67709,0 3.5,-0.47396 1.82292,-0.51041 2.62501,-0.83854 h 0.36458 z" id="path9195" class="svg-elem-2"></path>
|
|
36
48
|
|
|
@@ -48,7 +60,7 @@
|
|
|
48
60
|
|
|
49
61
|
<path style="fill: none; stroke: rgb(0, 255, 255); stroke-width: 40; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1;" d="m 52.344827,151.34483 82.310343,-1.89656" id="path9255" class="svg-elem-6"></path>
|
|
50
62
|
|
|
51
|
-
</mask>
|
|
63
|
+
** </mask>**
|
|
52
64
|
|
|
53
65
|
</g>
|
|
54
66
|
|
|
@@ -72,6 +84,8 @@
|
|
|
72
84
|
|
|
73
85
|
|
|
74
86
|
|
|
87
|
+
・strokeの色の変更。
|
|
88
|
+
|
|
75
89
|
・maskをmask-imageに変更しても変わらず。
|
|
76
90
|
|
|
77
91
|
・inkscapeでsvg生成しているので、inkscapeでもmaskがかからない様な書き出しをしたのかと思いましたが、inkscape内ではきちんとマスクの効果が表れます。
|