当它的源是svg时,为什么我的剪辑路径不起作用？

Question

我正在关注使用css 属性的mozilla文档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>