覆盖现有像素的混合

Question

我正在尝试显示带有一些透明部分的 svg 图标。

这些图标中的白色表示位于先前渲染的黑色像素之上的透明像素。 我找不到正确的混合模式或剪辑/蒙版模式来正确显示它。

有没有办法通过CSS或某些属性来解决这个问题而不改变svg路径本身？

它应该是这样的。这里白色只是简单地替换为背景色。但这是错误的解决方案，因为可以用图片代替颜色。

这就是没有白色的图标的样子

示例 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>

Answer 1

你现在拥有的是填充路径。我会回去重新画一切。

但是，如果您正在寻找解决方案，您可以将所有路径放在后面带有黑色矩形的蒙版中。请注意，除了您之前填充白色的路径现在填充为黑色之外，所有路径现在都填充为白色。

在下一个示例中，我使用由这些路径遮盖的红色填充矩形。

为了更改图标的颜色，请更改红色矩形的填充。

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="m">
        <rect width="28" height="28" fill="black"/>
        <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="white" />
        <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="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.6289Z" fill="black"/>
        <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="white" />
    </mask>


    <rect width="28" height="28" fill="red" mask="url(#m)"/>
</svg>