Css 内联SVG路径不工作

我一直试图获得一个内联svg剪辑路径来工作，但不太明白为什么不能

代码段中的第一个div是不起作用的（#myClip）

第二个是它应该是什么样子

第三个div是所有相同的代码，但具有不同的路径

我的第一个有什么问题？非常感谢您的帮助

#myDiv{
背景：红色；
最小高度：400px；
-webkit剪辑路径：url（#myClip）；
剪辑路径：url（#myClip）；
}
/*使用我不想要的不同剪辑路径进行Div*/
#我的第二分区{
背景：红色；
最小高度：400px；
-webkit剪辑路径：url（#myClipTwo）；
剪辑路径：url（#myClipTwo）；
}

Div的剪辑路径无效
原始SVG
具有不同剪裁路径的Div

您已将剪切路径定义为

clipPathUnits=“objectBoundingBox”

。这样做时，坐标必须介于0和1之间。（0,0）表示要应用剪辑的图元的左上角。和（1,1）表示右下角

---

但是你的坐标比这个大得多。例如，您的初始行（

M0,0V678.48

）是从（0,0）到（0678.48）。

您已将剪切路径定义为

clipPathUnits=“objectBoundingBox”

。这样做时，坐标必须介于0和1之间。（0,0）表示要应用剪辑的图元的左上角。和（1,1）表示右下角

---

但是你的坐标比这个大得多。例如，您的初始行（

M0,0V678.48

）是从（0,0）到（0678.48）。

我想解释一下为什么坐标需要介于0和1之间，但我已经手工制作了SVG，而不是从illustrator导出，它使用0和1之间的坐标非常接近我的原始坐标，所以它可以工作

#myDiv{
背景：红色；
最小高度：400px；
-webkit剪辑路径：url（#myClip）；
剪辑路径：url（#myClip）；
}

新剪辑路径
原始SVG

我想解释一下为什么坐标需要介于0和1之间，但我已经手工制作了一个SVG，而不是从illustrator导出，它非常接近我原来使用的坐标介于0和1之间，因此可以工作

#myDiv{
背景：红色；
最小高度：400px；
-webkit剪辑路径：url（#myClip）；
剪辑路径：url（#myClip）；
}

新剪辑路径
原始SVG

如果不使用clipPathUnits=“objectBoundingBox”，我会很好。但即使我把它去掉，它也不起作用？当应用于HTML元素时，使用objectBoundingBox坐标会更好。这是因为无论HTML元素在页面上的什么位置，它都会自动适合HTML元素。另一种方法不那么容易使用，因为您必须小心地将坐标与页面上元素的位置相匹配。但即使我把它去掉，它也不起作用？当应用于HTML元素时，使用objectBoundingBox坐标会更好。这是因为无论HTML元素在页面上的什么位置，它都会自动适合HTML元素。另一种方法不那么容易使用，因为您必须小心地将坐标与页面上元素的位置相匹配。坐标必须介于0和1之间，因为它们是边界框的百分比。谢谢！我想我的问题是，当保存svg时，为什么sketch和illustrator输出的坐标大于1？这些坐标位于边界之外；您也可以有负坐标。坐标必须介于0和1之间，因为它们是边界框的百分比。谢谢！我想我的问题是，当保存svg时，为什么sketch和illustrator输出的坐标大于1？这些坐标位于边界之外；你也可以有负坐标。