🐥
mix-blend-mode: difference; がうまくいかない時
サイトの右上とかに位置固定でsvgのロゴデータを置いて、differenceを当てることで背景色が黒のときは白、白の時は黒になるようにしたい。でもなぜかうまくいかないとき。
z-indexはむしろ使うとだめ。親からもsvgを格納してるdivからも全部排除する。
position: fixed;はok。
top: 64px;
right: 64px;
とかもok。
mix-blend-mode: difference;はsvgを格納してるdivに当てればok。
svgにあてたcssでfill: #fff;を設定しておけばok。
svgのインラインでfill="white"にしててもfill="none"にしてても問題ない。
参考
Discussion