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

Question

我正在关注 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说明我的问题，希望你能发现我的错误:)

Answer 1

将您的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>