我有一個 div，其中有一個帶有以下代碼的 SVG：
HTML
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>
</div>
CSS
div {
background: linear-gradient(
to bottom right,
var(--norm-col) 0%,
var(--norm-col) 50%,
var(--bg-color) 50%,
var(--bg-color) 100%);
}
div svg {
width: 30px;
height: 30px;
mix-blend-mode: difference;
}
我想在黑色一側填充 SVG 白色，在白色一側填充黑色。
uj5u.com熱心網友回復：
混合混合模式作業正常。請發布您的代碼 - 肯定有其他問題。
div {
background: linear-gradient(
to bottom right,
black 0%,
black 50%,
white 50%,
white 100%);
}
#test {
position: absolute;
top: 30px;
left: 30px;
width: 400px;
height: 400px;
}
#testSVG {
mix-blend-mode: difference;
}
body {
background: blue;
}<div id="test">
<svg id="testSVG" width="300px" height="300px">
<circle r="100" cx="150" cy="150" fill="white"/>
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516168.html
上一篇：SVG滑鼠相對于轉換元素的位置
下一篇：如何圍繞其軸旋轉svg組件