css - 为什么我的剪辑路径在来源是 svg 时不起作用？

我正在关注 mozilla documentation 使用 css clip-path 属性将 svg clipPath 应用于 HTMLElement 。但出于某种原因，它对我不起作用，不适用于 div 和图像。

在文档中，它说您可以使用以下代码轻松剪辑元素:

<style>.target { clip-path: url(#c1); }</style>
<svg:svg height="0">
  <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
    <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
    <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
  </svg:clipPath>
</svg:svg>

我已经试过了，但它不起作用。 clip-path 属性适用于polygon() 和ellipse() 等预定义方法，但不适用于链接的svg。

我做了一个 JSFiddle 来说明我的问题，希望你能找到我的错误:)

最佳答案

将您的 clipPath 放在 defs 标签中。使用 foreignObject 导入需要裁剪的 HTML 元素并应用内联 clip-path 以获得最大的浏览器支持。

#kitten {
  width: 250px;
}
#kittenReplica {
  width: 250px;
  height: 187.5px;
  background-color: lightblue;
}

<svg width="500px" height="187.5px">
  <defs>
    <clipPath id="path" clipPathUnits="objectBoundingBox">
      <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
      <rect x="0.5" y="0.2" width="0.5" height="0.8" />
    </clipPath>
  </defs>
  <foreignObject clip-path="url(#path)" width="50%" height="100%">
    <img src="http://i.imgur.com/tzPv43g.jpg" id="kitten" class="clipped" />
  </foreignObject>
  <foreignObject x="250" clip-path="url(#path)" width="50%" height="100%">
    <div id="kittenReplica" class="clipped"></div>
  </foreignObject>
</svg>

关于css - 为什么我的剪辑路径在来源是 svg 时不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27697933/