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

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

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

Here is the updated demo on jsFiddle.

之前的问题是 Google Chrome 错误地将剪切路径应用于文档而不是引用它的 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>

这是针对多个内联 svg 的，并且肯定与 Adobe Illustrator 生成的 "clip-path" ID 冲突，该 ID 给出了 clipPath。

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

How to make SVG clip-path work correctly in Google Chrome?

css

google-chrome

svg

clip-path