如何在Google Chrome中正确使用SVG剪辑路径？

Question

我正在使用内联SVG和CSS clip-path属性在div元素上创建一个斜角。

在Firefox上，斜角的大小是正确的。但是，在Google Chrome上，不仅斜角的大小不正确，而且div元素的大小也会变得不正确。

Here is the demo on jsFiddle

如何让Google Chrome与SVG和clip-path一起正常使用？

P.S。我知道CSS生成的内容可以模拟斜角效果。但就我而言，我必须使用SVG和clip-path。

Answer 1

帮我解决这个问题的一件事是添加一个独特的剪辑路径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>

这是针对多个内联svgs的，并且必须与Adobe Illustrator生成的“剪辑路径”ID发生冲突。

Answer 2

我在this article找到了解决方案。解决方案是将clipPathUnits="objectBoundingBox"添加到clipPath元素，然后将points元素的polygon属性的值更改为百分比值。

Here is the updated demo on jsFiddle

之前的问题是Google Chrome错误地将剪切路径应用于文档而不是引用它的HTML元素。根据上述文章，将clipPathUnits属性的值设置为objectBoundingBox会使剪切路径尊重引用它的HTML元素的边界。