如何使用剪輯路徑將此形狀應用於圖像？

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