Css 为什么我的剪辑路径在'；s源代码是svg吗？

我正在使用css

clip path

属性将

svg clipPath

应用于

HTMLElement

。但出于某种原因，它对我不起作用，在div中和图像中都不起作用

在文档中，它说您可以使用以下代码轻松剪裁元素：

<style>.target { clip-path: url(#c1); }</style>
<svg:svg height="0">
  <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
    <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
    <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
  </svg:clipPath>
</svg:svg>

.target{剪辑路径：url（#c1）；}

我也试过了，但没用。

clip path

属性适用于多边形（）和椭圆（）等预定义方法，但不适用于链接的svg

---

我对我的问题做了一个说明，希望你能发现我的错误：）

把你的

clipPath

放在

defs

标签中。使用

foreignObject

导入需要剪裁的HTML元素，并应用内联

clip path

以获得最大的浏览器支持

小猫{ 宽度：250px； } #基坦雷普利卡{ 宽度：250px； 身高：187.5px； 背景颜色：浅蓝色； }

---

您的问题是使用了带有“svg”名称空间前缀的元素，但没有定义svg名称空间。如果从每个元素中删除“svg:”，它就会工作

例如，将

更改为

如果查看从中复制的原始Firefox示例，您将看到svg名称空间是在

元素中定义的：

xmlns:svg=”http://www.w3.org/2000/svg“

下面是该示例在Firefox和Chrome上的一个版本

及

正文{
背景：#ccc；
字体大小：30px；
}
p{
宽度：300px；
边框：1px纯黑；
显示：内联块；
边缘：1米；
}
b{
轮廓：1px点蓝色；
}
.目标{
-webkit剪辑路径：url（#c1）；
剪辑路径：url（#c1）；
}

Lorem ipsum Door sit amet，为精英服务，为临时雇员提供服务
这是一个巨大的挑战。这是一个非常小的节日。

非常感谢，最后一件事，为什么异物的宽度是50%？我的意思是你从哪里得到这些值。很抱歉，我对svg这件事一无所知：）@Rou-这是因为如果你注意到我将

svg

的

宽度设置为
500px
，你的小猫和
lighblue
元素都是
250px
。这就是将其设置为
50%
的原因。顺便说一句，这里有一个例子，如果你想把
svg
放在一个容器中：啊！我没有注意到哈哈哈，谢谢你，你得到了万能的绿色勾号（我对stackoverflow也很陌生，不知道它到底给了你什么）。顺便说一句，它之所以没有动画，是因为它需要在两条路径上都有相同的命令（你只能改变值），虽然我正在看一本完整的动画指南，希望能找到一个答案来补充这个问题：）
路径需要有相同数量的顶点。
如果你想了解更多的hahaThanks！但在我的小提琴里，我确实放了前缀：（你是对的。对不起。我已经用正确的解释更新了我的答案。很抱歉造成混淆。谢谢！如果这不属于这里，我很抱歉，但是你能告诉我如何设置剪辑路径转换的动画吗？我想这很简单，只要在对象上应用转换来更改
剪辑路径
属性，但它不是ha很可能最好问一个新问题。你可能需要解释你想要的是哪种动画。你在测试什么？Chrome目前有一个限制，它不会用url剪辑路径剪辑html内容。此外，上面的内容是xhtml（它有名称空间），因此它在JSFIDLE中不起作用。