[英]How to fill a SVG with the opposite background-color?
我有一个 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 黑色的一面填充白色,白色的一面填充黑色。
混合混合模式工作正常。 请发布您的代码 - 一定是其他地方出了问题。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.