Css 如何使用svg形状遮罩图像？

我有一个SVG形状，我想用它作为遮罩，这样我添加到它的每个图像都会在该形状内

这是我想要用作遮罩的形状：

这是我的svg代码，用于获得黑色的遮罩

我的svg面具

以下是通过CSS应用SVG剪辑路径的示例：

正文{
保证金：0
}
.测试{
高度：160px；
宽度：170px；
-webkit剪辑路径：url（#形状）；
剪辑路径：url（#形状）；
}

难道你不想要一个clipPath而不是一个面具吗？我很乐意这样做，只是我不知道如何用clipPath获得确切的形式。你知道如何得到确切的形式吗？Tksrotate（45）在带有rx设置的rect元素上进行变换非常感谢，但我无法想出一个跨浏览器工作的解决方案。你能为我提供一个JSFIDLE吗？我不是clipPath cross browser的专家。Thanks@RobertLongson这是我能想到的，但是这与IE不兼容，例如+1。但是我有一个问题，即使我完全复制和粘贴代码，它也不能工作，除非它在JSFIDLE或codepen上。但是它在我的php页面中不起作用，特别是当我使用直接url时，除非我使用我在codepen或JSFIDLE上使用的url，而且它只在第一个图像上起作用。第二个图像不显示。如果前面有文字，它就会覆盖图像。你能帮我找出原因吗？Tkstry提出另一个问题“如果集成在php中，为什么svg不能工作”（发布源代码和所有详细信息）顺便说一句，记住这个解决方案目前在IE中不受支持，但是应该有一个polyfill