我无法使用fill="#fff"的svg图像在chrome或edge之类的webkit浏览器中使用mix-blend-mode: difference在白色背景上显示。
在Firefox中工作正常。查阅此提琴以供参考：JSFiddle
CSS
body {
background-color: #fff;
}
.volume-icon {
mix-blend-mode: difference;
}
HTML
<body>
<img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
</body>
由于应用于body的背景具有a special behavior，因此您面临与背景传播有关的问题
如果您考虑使用另一个容器，它将可以正常工作：
div {
background-color: #fff;
}
.volume-icon {
mix-blend-mode: difference;
}<div>
<img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
</div>使用body元素，您需要为html提供与透明不同的背景，并且可以使用：
body {
background-color: #fff;
}
.volume-icon {
mix-blend-mode: difference;
}
html {
background-color: #fff; /* even the same color will do the job */
}<img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>