如何使用clip-path将此形状应用于图像？

Question

我已经在这里问了一个类似的问题：How to create this shape using CSS?。但这个解决方案是否会创建一个具有背景的元素。

现在我需要将此形状应用于图像：

示例：

重要：图片会与另一个元素重叠，因此应该是透明的超出其范围。上面的例子有灰色背景。

我想解决方法是使用clip-path。这就是我正在尝试的：http://jsfiddle.net/gf9uj98j/1/

Answer 1

我找到了这个解决方案：

＆＃13;

＆＃13;

.bg {
  width: 300px;
  height: 300px;
  background-color: red;
  margin: 10px;
}

#img-test {
  clip-path: url(#clipping);
  -webkit-clip-path: url(#clipping);
}

＆＃13;

<div class='bg'>
  <img id="img-test" src="http://i.stack.imgur.com/pjCCj.png">
</div>
      
<svg>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
      <circle cx=".5" cy=".5" r=".4" />
      <ellipse cx=".17" cy=".5" rx=".1" ry=".37" />;
      <ellipse cx=".83" cy=".5" rx=".1" ry=".37" />;
      
      <ellipse cx=".5" cy=".17" rx=".37" ry=".1" />;
      <ellipse cx=".5" cy=".83" rx=".37" ry=".1" />;
    </clipPath>
  </defs>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不使用CSS，只需使用SVG：               

<image xlink:href='thesoul2.jpg' y="0" x="200" width="35%" height="40%" 
clip-path="url(#CP)"/>

来自https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#clipPath