Css 如何使SVG剪辑路径在Google Chrome中正确工作？

我使用内嵌SVG和CSS

clip path

属性在

div

元素上创建一个斜角

在Firefox上，斜角的大小是正确的。但是，在Google Chrome上，不仅斜角的大小错误地变小，而且

div

元素的大小也错误地变小

如何使Google Chrome与SVG和剪辑路径正确配合使用

---

另外，我知道CSS生成的内容可以模拟斜角效果。但在我的例子中，我必须使用SVG和我在中找到的解决方案。解决方案是将

clipPathUnits=“objectBoundingBox”

添加到

clipPath

元素中，然后将

polygon

元素的

points

属性的值更改为百分比值

---

之前的问题是Google Chrome错误地将剪切路径应用于文档，而不是引用文档的HTML元素。根据前面提到的文章，将

clipPathUnits

属性的值设置为

objectBoundingBox

会使剪切路径尊重引用它的HTML元素的边界。

帮助我解决这个问题的一件事是添加一个唯一的剪切路径ID。这与webkit的供应商前缀一起，帮我把一切都搞定了

Example:

<svg>
     (...normal svg stuff...)

     <clipPath id="uniqueId" transform="translate(-0.01)">
       <rect width="90.96" height="78" style="fill: none"/>
     </clipPath>

     ...other svg stuff...

     <g style="clip-path: url(#uniqueId); -webkit-clip-path: url(#uniqueId);">

 </svg>

示例：
（…普通svg内容…）
…其他svg东西。。。

---

这是针对多个内联SVG的，必须与Adobe Illustrator生成的clipPath提供的“clip path”ID发生冲突。

我有一个在chrome中工作的解决方案。这在firefox中不起作用。@SamDawson谢谢。我知道纯CSS方法。但是我需要一个斜角来在Firefox和Chrome上工作，我正在尝试使用最短的代码。在Chrome中，它的右边和底部的正方形看起来要小10像素左右。我不确定为什么。看起来Webkit浏览器没有正确支持该功能。看见