回答編集履歴
3
調整
test
CHANGED
@@ -14,8 +14,8 @@
|
|
14
14
|
width: 300px;
|
15
15
|
height: 300px;
|
16
16
|
background-color:gray;
|
17
|
-
mask-image: url(
|
17
|
+
mask-image: url(sample.svg);
|
18
|
-
-webkit-mask-image: url(
|
18
|
+
-webkit-mask-image: url(sample.svg);
|
19
19
|
}
|
20
20
|
</style>
|
21
21
|
<div class="masked">
|
2
調整
test
CHANGED
@@ -5,3 +5,26 @@
|
|
5
5
|
https://codepen.io/yamowo/embed/mdMbNaQ
|
6
6
|
のHTMLの部分をコピペするのであれば、動作すると思います
|
7
7
|
少なくとも私の環境ではで動作しました
|
8
|
+
|
9
|
+
# マスクサンプル
|
10
|
+
|
11
|
+
```CSS
|
12
|
+
<style>
|
13
|
+
.masked {
|
14
|
+
width: 300px;
|
15
|
+
height: 300px;
|
16
|
+
background-color:gray;
|
17
|
+
mask-image: url(x.svg);
|
18
|
+
-webkit-mask-image: url(x.svg);
|
19
|
+
}
|
20
|
+
</style>
|
21
|
+
<div class="masked">
|
22
|
+
aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
|
23
|
+
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
|
24
|
+
cccccccccccccccccccccccccc<br>
|
25
|
+
dddddddddddddddddddddddddd<br>
|
26
|
+
eeeeeeeeeeeeeeeeeeeeeeeeee<br>
|
27
|
+
ffffffffffffffffffffffffff<br>
|
28
|
+
</div>
|
29
|
+
```
|
30
|
+
特に問題ないようです
|
1
chousei
test
CHANGED
@@ -1,2 +1,7 @@
|
|
1
1
|
単体で動くSVGであればサイトにアップしても動くはずです
|
2
2
|
変なデータを参照する設定になっていないか確認してみてください
|
3
|
+
|
4
|
+
# 追記
|
5
|
+
https://codepen.io/yamowo/embed/mdMbNaQ
|
6
|
+
のHTMLの部分をコピペするのであれば、動作すると思います
|
7
|
+
少なくとも私の環境ではで動作しました
|