带有svg的css剪辑路径在Chrome中不起作用答案

【问题标题】：css clip-path with svg not working in Chrome带有svg的css剪辑路径在Chrome中不起作用
【发布时间】：2018-11-27 23:35:07
【问题描述】：

我创建了一个 svg 用作图像上的剪辑路径，它在 Firefox 中看起来很完美，但在 Chrome 中不起作用，我想知道问题出在哪里。

Chrome 应该支持内联 svg 剪辑路径 according to this。

并全力支持according to MDN。

<style>

  img {
    width: 40%;
    height: auto;
    display: inline;
  }
  .clip {
      -webkit-clip-path: url('#clip');
      clip-path: url('#clip');
  }
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">

<img src="https://i.imgur.com/nnHdzO6l.jpg" >

<svg version="1.1"
     baseProfile="full"
     height="400"  width="400"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
     <clipPath id="clip" 
               clipPathUnits="objectBoundingBox"
               transform="scale(0.0025, 0.0025)">
               <!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
       <circle cx="50%" cy="50%" r="50%" />
       <rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
     </clipPath>
  </defs>
</svg>

【问题讨论】：

根据什么？
该死，它确实可以在 Chrome 中工作...我有 <def> 而不是 <defs>

标签： css google-chrome svg clip-path

【解决方案1】：

Chrome 目前不支持外部 SVG 文件。

您可以在这里查看： https://caniuse.com/#search=CSS%20clip

这是他们对 Chrome 的部分支持的评价：

部分支持是指支持形状和 url(#foo) 语法用于内联 SVG，但不适用于外部 SVG 中的形状。

【讨论】：