如何使用剪辑路径将此形状应用于图像？

Question

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

现在我需要这种形状适用于一个图像：

实施例：

重要：图像重叠另一元件，所以它应该透明超出界限。上面的例子有一个灰色的背景。

我想解决方案是使用clip-path。这就是我想：http://jsfiddle.net/gf9uj98j/1/

Answer 1

我发现这个解决方案：

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

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

<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>

Answer 2

而不是使用CSS，只需使用SVG：

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

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