Css 剪辑路径svg适用于图像，但不适用于div

在MDN上，有一个关于如何在图像上使用剪辑路径svg的示例。相同的剪辑路径似乎不适用于

div

元素。有人能澄清一下：

• 为什么此代码不能按预期工作
• 使svg片段路径在div上工作的一种方法

示例代码（）剪辑图像

#剪裁{
剪辑路径：url（#交叉）；
}

---

剪辑路径

未被继承。W3C

因此，我们不会通过将

剪辑路径

应用于父块来剪切子元素

最好使用svg

标记而不是

，并对其应用

剪辑路径

使用div作为自适应容器


.wrapped{
宽度：25%；
身高：25%；
}
#img1{
剪辑路径：url（#交叉）；
}
正如@enxaneta所指出的，这都是大小的问题。如果增加div的大小，您将看到以下效果：


#剪裁{
宽度：300px；
高度：200px；
背景：黑色；
剪辑路径：url（#交叉）；
}
解决问题的方法是使用
clipPathUnits=“objectBoundingBox”
构建大小介于0和1之间的剪切路径，如下所示：


#剪裁{
边缘：1米；
宽度：100px；
高度：100px；
背景：黑色；
显示：内联块；
剪辑路径：url（#交叉）；
}
#剪短的，大的{
宽度：200px；
高度：200px；
}

页面下方的部分列出了在几种非MS浏览器中工作的“HTML元素”，但也标记为“实验性的。预期行为将来会改变。”//进一步说明了不同浏览器中的支持级别。@04FS Firefox 70根据caniuse表应具有完全支持。这个例子在那里也不起作用。关于实验阶段的公平点。如果大家一致认为这是一个（部分）未实现/未记录的功能，我会给MDN一个提示。Firefox确实支持使用SVG clippath剪裁div。请将div的大小更改为
width:300px；高度：300px@enxaneta抓得好。像素大小似乎与svg中的一个单位相关：）。如果你发布一个答案，我可以接受它并结束问题；）。你能详细说明你所说的父块和子元素吗。这些是svg中的元素吗？在这种情况下，我怀疑svg有问题，因为相同的svg clipPath在图像上工作。@RMo-父块svg-第二个示例中的子元素我在这里没有得到继承的部分？我们没有任何子-父关系，或者我遗漏了什么吗？@Temani Afif在我指出的w3C链接中，明确地写了
clip path:inherit NO
，正如我从示例中理解的那样，OP想要将
剪辑路径
应用于图像将位于其中的div，也许我急于预测OP的愿望：）我猜继承解释了另一件事，因为剪辑路径将影响元素的所有内容：。。。可能子对象不继承该值，但它们受其父对象的影响（如不透明度、显示等），那么相反的效果呢？有没有办法通过保持剪辑路径像这样简单来应用魔法属性来隐藏十字架并显示另一部分？我想我们必须定义4个矩形：？好吧，你可以同时保留这两个。我只是想知道是否有一种方法可以保持不变，并且可以有相反的结果（就像我们可以反转白色和透明的面具一样），这个答案和Temani Afif的答案似乎都是正确的。如果您正在处理具有相同高宽比的图像，则“objectBoundingBox
解决方案非常好。否则，存在剪辑路径扭曲的风险。Temani Afif的回答指出，当您不使用
objectBoundingBox
时，图像的大小很重要。svg中的单位与该场景中div/image中的像素相关。