我正在try 显示带有一些透明部分的SVG图标.
这些图标中的白色意味着位于先前渲染的黑色像素之上的透明像素. 我找不到正确的混合模式或剪辑/蒙版模式来正确显示它.
有没有一种方法可以在不改变SVG路径本身的情况下，通过css或一些属性来解决这个问题？
This is how it should look. Here the white color is simply replaced with the background color. But it's the wrong solution because instead of color there can be a picture.
This is what the icons look like without white color
示例SVG:
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2124_24547)">
<path d="M5.64062 6.36719H7.45703V4.5625C7.45703 3.57812 7.96094 3.09766 8.93359 3.09766H19.5391C20.5234 3.09766 21.0156 3.57812 21.0156 4.5625V6.34375H22.832V4.69141C22.832 2.40625 21.6953 1.38672 19.5156 1.38672H8.95703C6.89453 1.38672 5.64062 2.40625 5.64062 4.69141V6.36719Z" fill="black" fill-opacity="0.85"/>
<path d="M4.49219 23.1484H23.9922C26.2656 23.1484 27.4727 22 27.4727 19.7148V8.74609C27.4727 6.47266 26.2656 5.3125 23.9922 5.3125H4.49219C2.32422 5.3125 1 6.47266 1 8.74609V19.7148C1 22 2.20703 23.1484 4.49219 23.1484ZM2.89844 19.8086V8.65234C2.89844 7.62109 3.42578 7.08203 4.46875 7.08203H24.0156C25.0469 7.08203 25.5859 7.62109 25.5859 8.65234V19.8086C25.5859 20.8398 25.0469 21.3789 24.0156 21.3789H4.46875C3.42578 21.3789 2.89844 20.8398 2.89844 19.8086ZM21.3906 11.3242C22.1758 11.3242 22.8438 10.668 22.8438 9.85938C22.8438 9.07422 22.1758 8.40625 21.3906 8.40625C20.582 8.40625 19.9258 9.07422 19.9258 9.85938C19.9258 10.668 20.582 11.3242 21.3906 11.3242Z" fill="black" fill-opacity="0.85"/>
<path d="M7.96094 26.6289H20.5117C22 26.6289 22.75 25.9492 22.75 24.3906V14.8281C22.75 13.2695 22 12.5898 20.5117 12.5898H7.96094C6.54297 12.5898 5.72266 13.2695 5.72266 14.8281V24.3906C5.72266 25.9492 6.47266 26.6289 7.96094 26.6289Z" fill="white"/>
<path d="M7.96094 26.6289H20.5117C22 26.6289 22.75 25.9492 22.75 24.3906V14.8281C22.75 13.2695 22 12.5898 20.5117 12.5898H7.96094C6.54297 12.5898 5.72266 13.2695 5.72266 14.8281V24.3906C5.72266 25.9492 6.47266 26.6289 7.96094 26.6289ZM8.54688 24.8594C7.92578 24.8594 7.60938 24.5547 7.60938 23.9219V15.2852C7.60938 14.6523 7.92578 14.3594 8.54688 14.3594H19.9375C20.5703 14.3594 20.8633 14.6523 20.8633 15.2852V23.9219C20.8633 24.5547 20.5703 24.8594 19.9375 24.8594H8.54688ZM10.1758 18.2852H18.3203C18.7422 18.2852 19.0469 17.9688 19.0469 17.5469C19.0469 17.1484 18.7422 16.8438 18.3203 16.8438H10.1758C9.75391 16.8438 9.4375 17.1484 9.4375 17.5469C9.4375 17.9688 9.75391 18.2852 10.1758 18.2852ZM10.1758 22.375H18.3203C18.7422 22.375 19.0469 22.0586 19.0469 21.6602C19.0469 21.25 18.7422 20.9336 18.3203 20.9336H10.1758C9.75391 20.9336 9.4375 21.25 9.4375 21.6602C9.4375 22.0586 9.75391 22.375 10.1758 22.375Z" fill="black" fill-opacity="0.85"/>
</g>
<defs>
<clipPath id="clip0_2124_24547">
<rect width="26.4727" height="25.6289" fill="white" transform="translate(1 1)"/>
</clipPath>
</defs>
</svg>