剪辑路径多边形不适用于 chrome答案

【问题标题】：clip-path polygon not working on chrome剪辑路径多边形不适用于 chrome
【发布时间】：2017-07-11 19:03:49
【问题描述】：

嗨，

我有这个 SVG 文件：

<svg preserveAspectRatio="" viewBox="0 0 130 280" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="280px" width="130px">
 <clipPath id="search">
  <polygon points="8.96671,272.712 118.624,272.876 118.624,276.683 117.128,278.335 34.7667,278.417 33.1129,279.327 13.9283,279.327 9.29748,275.689 9.29748,272.546"/>
 </clipPath>
</svg>

我的 CSS 代码：

clip-path:url("file.svg#search");
-webkit-clip-path:url(file.svg#search);

元素在 Firefox 上被裁剪，但在 Chrome 上没有。这是为什么呢？

谢谢。

【问题讨论】：

bugs.chromium.org/p/chromium/issues/detail?id=109212
所以没有办法了？
将所有内容放在同一个文件中。
SVG 文件中的所有内容？
对不起，我不明白。我的 SVG 图像是一个单独的文件，我的 CSS 代码在我的样式表中。我的 html 中没有任何内容。

标签： google-chrome svg clip-path

【解决方案1】：

我添加了 overflow: hidden 添加它适用于 chrome 55。这是我的代码：

<svg id="mySVG" height="0" width="0">
     <defs>
         <clipPath id="customPath">
         <path d="M36.531,-0.000 C36.531,-0.000 -16.969,6.500 5.531,76.000 C28.031,145.500 138.531,534.000 138.531,534.000 C138.531,534.000 150.031,583.000 220.531,576.000 C291.031,569.000 1033.531,501.000 1033.531,501.000 C1033.531,501.000 1094.531,504.000 1099.531,428.500 C1104.531,353.000 1099.531,1.000 1099.531,1.000 L36.531,-0.000 Z" />
     </clipPath>
 </defs>

.wrapper-mask {
   clip-path: url(#customPath);
   width: 1100px;
   overflow: hidden;
   height: 577px;
   transform: scale(0.97) perspective(1px);
}

【讨论】：