質問編集履歴
1
実現したいこと・発生している問題・試したことに、追記を行いました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
SVGの
|
|
1
|
+
SVGの<mask>で透過度を調整したい
|
body
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
SVGのPathにマスクをかけ、テキストの透過度を
|
|
3
|
+
SVGのPathに<mask>を利用しマスクをかけ、テキストの透過度を調整したい。
|
|
4
|
-
※最終的に一筆書きのアニメーションを実現したい。
|
|
4
|
+
※最終的に一筆書きのアニメーションを実現したいためです。
|
|
5
5
|
|
|
6
|
+
・透過度を調整される側：<g id="text8105">
|
|
7
|
+
・マスクに使う側：<mask id="mask">
|
|
8
|
+
|
|
9
|
+
宜しくお願い致します。
|
|
10
|
+
|
|
6
11
|
### 発生している問題・エラーメッセージ
|
|
7
12
|
|
|
8
|
-
・<mask></mask>で囲んだPathにマスクがかかるのではなく、
|
|
13
|
+
・<mask></mask>で囲んだPathにマスクがかかるのではなく、全て見えなくなってしまった。
|
|
14
|
+
・mask: url(#mask);で#text8105を紐づけると、#text8105も見えなくなってしまう。
|
|
9
15
|
|
|
10
16
|
### 該当のソースコード
|
|
11
17
|
|
|
@@ -14,7 +20,7 @@
|
|
|
14
20
|
|
|
15
21
|
<g inkscape:label="レイヤー 1" inkscape:groupmode="layer" id="layer1" transform="translate(-51.884118,-129.45358)">
|
|
16
22
|
|
|
17
|
-
<g aria-label="test" transform="matrix(0.41528567,0,0,0.49893832,-37.501138,-118.91737)"
|
|
23
|
+
<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;">
|
|
18
24
|
<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>
|
|
19
25
|
<path d="m 316.83727,540.20011 h -30.00522 q 0,3.75521 1.13021,6.56251 1.13021,2.77083 3.09896,4.55729 1.89583,1.75 4.48438,2.625 2.625,0.875 5.76041,0.875 4.15626,0 8.34897,-1.64062 4.22917,-1.67709 6.01563,-3.28125 h 0.36458 v 7.47396 q -3.46354,1.45833 -7.07292,2.44271 -3.60938,0.98437 -7.58334,0.98437 -10.13542,0 -15.82292,-5.46875 -5.68751,-5.50521 -5.68751,-15.60417 0,-9.98959 5.4323,-15.85939 5.46875,-5.86979 14.36459,-5.86979 8.23959,0 12.68751,4.8125 4.48437,4.8125 4.48437,13.67188 z m -6.67188,-5.25 q -0.0365,-5.39583 -2.73437,-8.34896 -2.66146,-2.95313 -8.13021,-2.95313 -5.50522,0 -8.78647,3.2448 -3.24479,3.24479 -3.68229,8.05729 z" id="path9197" class="svg-elem-3"></path>
|
|
20
26
|
<path d="m 356.32167,548.11158 q 0,5.57812 -4.63021,9.15104 -4.59376,3.57292 -12.57813,3.57292 -4.52084,0 -8.31251,-1.05729 -3.75521,-1.09375 -6.30729,-2.36979 v -7.69272 h 0.36458 q 3.24479,2.44271 7.21875,3.90105 3.97396,1.42187 7.6198,1.42187 4.52083,0 7.07292,-1.45833 2.55208,-1.45834 2.55208,-4.59375 0,-2.40625 -1.38541,-3.64584 -1.38542,-1.23958 -5.32292,-2.11458 -1.45834,-0.32813 -3.82813,-0.76563 -2.33333,-0.4375 -4.26563,-0.94792 -5.35937,-1.42187 -7.61979,-4.15625 -2.22396,-2.77083 -2.22396,-6.78125 0,-2.51563 1.02083,-4.73959 1.05729,-2.22396 3.17188,-3.97396 2.04167,-1.71354 5.17708,-2.69791 3.17188,-1.02084 7.07293,-1.02084 3.64583,0 7.36458,0.91146 3.75521,0.875 6.23438,2.15104 v 7.32813 h -0.36458 q -2.625,-1.93229 -6.38022,-3.24479 -3.75521,-1.34896 -7.36458,-1.34896 -3.75521,0 -6.34375,1.45833 -2.58855,1.42188 -2.58855,4.26563 0,2.51563 1.56771,3.79167 1.53125,1.27604 4.95834,2.07812 1.89583,0.43751 4.22917,0.87501 2.36979,0.4375 3.9375,0.80208 4.77604,1.09375 7.36458,3.75521 2.58855,2.69792 2.58855,7.14584 z" id="path9199" class="svg-elem-4"></path>
|
|
@@ -23,7 +29,7 @@
|
|
|
23
29
|
|
|
24
30
|
<mask id="mask">
|
|
25
31
|
<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>
|
|
26
|
-
|
|
32
|
+
** </mask>**
|
|
27
33
|
</g>
|
|
28
34
|
|
|
29
35
|
</svg>
|
|
@@ -35,6 +41,7 @@
|
|
|
35
41
|
```
|
|
36
42
|
### 試したこと
|
|
37
43
|
|
|
44
|
+
・strokeの色の変更。
|
|
38
45
|
・maskをmask-imageに変更しても変わらず。
|
|
39
46
|
・inkscapeでsvg生成しているので、inkscapeでもmaskがかからない様な書き出しをしたのかと思いましたが、inkscape内ではきちんとマスクの効果が表れます。
|
|
40
47
|
|