回答編集履歴

3

調整

2023/11/28 09:10

投稿

yambejp
yambejp

スコア115870

test CHANGED
@@ -14,8 +14,8 @@
14
14
  width: 300px;
15
15
  height: 300px;
16
16
  background-color:gray;
17
- mask-image: url(x.svg);
17
+ mask-image: url(sample.svg);
18
- -webkit-mask-image: url(x.svg);
18
+ -webkit-mask-image: url(sample.svg);
19
19
  }
20
20
  </style>
21
21
  <div class="masked">

2

調整

2023/11/28 09:09

投稿

yambejp
yambejp

スコア115870

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

2023/11/28 07:37

投稿

yambejp
yambejp

スコア115870

test CHANGED
@@ -1,2 +1,7 @@
1
1
  単体で動くSVGであればサイトにアップしても動くはずです
2
2
  変なデータを参照する設定になっていないか確認してみてください
3
+
4
+ # 追記
5
+ https://codepen.io/yamowo/embed/mdMbNaQ
6
+ のHTMLの部分をコピペするのであれば、動作すると思います
7
+ 少なくとも私の環境ではで動作しました