Css svg图像的混合模式

为什么混合模式适用于普通图像（img标记），而不适用于svg（图像标记）？ 请看下面的示例，了解我试图实现的目标（我还希望像第一幅图像一样剪裁背景）：

。图像包装器{
宽度：100%；
背景#70C053；
}
.图像包装器图像{
滤镜：灰度（100%）；
混合模式：倍增；
}
img{
宽度：100%；
高度：自动；
滤镜：灰度（100%）；
混合模式：倍增；
}

---

MDN文档有一个例子

---

请参见此处：

它似乎不起作用，我将混合SVG本身：

.image wrapper SVG{filter:grayscale（100%）；mix-blend-mode:multiply；}

谢谢您的帮助！但是我真的很想在Chrome中保持clip pathWorks中的颜色如预期的那样（尽管您必须删除

height=“auto”

）。你说的“我真的很想在剪辑路径中保留颜色”是什么意思？但是目前你已经将背景设置为

。image wrapper

，所以整个div的rect将是绿色的。如果只希望剪裁区域着色，则还需要使用绿色背景剪裁零件。但是再一次，如果你只是想给你的剪贴图像上色，使用一个colorMatrix过滤器。好的，我用了一个feColorMatrix，现在它可以工作了，谢谢