將ClipPath應用於塊元素

Question

因此，我試圖將SVG路徑作爲clipPath應用於div，但似乎無法弄清楚爲什麼它不會在Chrome中執行任何操作，並在Firefox中顯示空白頁面。

http://jsfiddle.net/no5zmzLc/

<p class="target" style="background:lime;"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
</p> 

<img class="target" src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" alt="Cherry Blossoms."> 

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

p { width:500px; border:1px solid black; display:inline-block; margin:1em; padding:2em; } 
.target { clip-path: url(#c1); -webkit-clip-path: url(#c1);} 

Answer 1

CSS clip-path將只-webkit-瀏覽器。

您可以使用foreignObject元素將HTML元素導入svg元素並應用內嵌clip-path以使其在Firefox上也可以工作。

Updated Fiddle

p { 
 
    width: 500px; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    margin: 1em; 
 
    padding: 2em; 
 
} 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#cont { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<div id="cont"> 
 
    <svg width="100%" height="100%"> 
 
    <clipPath id="c1" clipPathUnits="userSpaceOnUse"> 
 
     <circle cx="25%" cy="25%" r="25%" id="circle" /> 
 
     <rect x="50%" y="20%" width="50%" height="80%" /> 
 
    </clipPath> 
 
    <foreignObject clip-path="url(#c1)" width="100%" height="100%"> 
 
     <p style="background:lime;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> 
 
     <img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" alt="Cherry Blossoms." /> 
 
    </foreignObject> 
 
    </svg> 
 
</div>