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

Question

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

在Firefox上，斜角的大小是正确的。然而，在Google上，不仅斜角的大小不正确地变小了，而且div元素的大小也变小了。

下面是关于jsFiddle的演示。

如何使Google与SVG和clip-path正确工作

我知道CSS生成的内容可以模拟斜角效果。但在我的例子中，我必须使用SVG和clip-path。

Answer 1

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

下面是在jsFiddle上更新的演示。

前面的问题是Google不正确地将剪裁路径应用于文档，而不是引用它的HTML元素。根据前面的文章，将clipPathUnits属性的值设置为objectBoundingBox使裁剪路径遵守引用它的HTML元素的边界。

Answer 2

帮助我解决这一问题的一件事是添加了一个独特的剪辑路径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的，并且肯定与clipPath给出的生成的“剪辑路径”ID发生了冲突。