ローカルだと見えないんですね。
maskとは
svgをbackgroundで表示させていたんだけど、アイコン目的だったから:hoverとかで色を変えたい。だけど画像ファイルを切り替えるのはめんどくさい。
maskにすればええんやで、という記事があった。
【CSS】mask-imageプロパティで簡単にSVGの色変えができた - Qiita
hover時、ナビのカレント時など同じアイコンで色だけ変えたいときに、別の色にした別画像で書き出すのが面倒で悩み続けてきました。 useタグを使う方法もありましたが、何故かうまくできず、、、 そこで出会ったmask-imageがかなり優秀だ...
qiita.com
画像でマスクをやれるということで、svgだけでなく透過pngでもいけるらしい。
ええやん、ってことでやってみたんだけど、ブラウザで見ても表示されない。
ローカル環境だとダメらしい
phpでもないのにダメらしい。
ChromeだけでなくFirefox、Edgeでも表示されなかった。
理由がわからんくてChatGPTに聞いたら、ネットワークを確認してファイルが読み込めているか確認しろとあった。
見てみたら「CORS error」とある。
読み込めてないから情報がほぼ無いけど、一応詳細を見る。
「Referrer Policy」が「strict-origin-when-cross-origin」とある。
strict-origin-when-cross-originとは？意味と最初から設定されている原因解説してみた
こんにちは、株式会社インディバースの代表の河合大です。 という方向けに、非エンジニアでもわかるように、 について解説していきます。 先に結論です。 動画でも解説しているので、こちらもご参照ください。 strict-ori ...
blog.media-analytics.jp
ちゃんと学べば正しく詳しくめんどくさく説明できるのだろうことで、要するにで言えば「file://はだめだ」という話。
「maskを使うならサーバー上で動かせ」という話。
PCに入れっぱなしだったXAMPPを起動してチェックしてみたら、普通に表示された。
疲れた。
ローカルでも表示されたけど条件がある：20250912追記
maskを使用するsvgファイルを別の箇所で表示させてたら表示された。
このとき、cssは別ファイルでも問題ない。
コメント