火狐SVG：剪輯

我想刪除一個img元素的角落：火狐SVG：剪輯

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
<body> 
<style type="text/css"> 
#div { background: #ffffff; width: 500px; height: 300px; padding: 10px; } 
#div img { background: #000000; } 
</style> 

<div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=500x300&sensor=false" alt="" class="t" /></div> 

<style>.t { clip-path: url(#c1); }</style> 
<svg:svg height="0"> 
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> 
    <svg:polyline x="0" y="0" width="0.5" height="0.5" points="0,60 20,20 40, 100, 60,40, 80,100, 100,40 120,100" fill="red" stroke="black" /> 
    </svg:clipPath> 
</svg:svg> 

</body> 
</html>

但圖像在前看不見？

我想，紅色標記的區域將被「刪除」/disapear，我沒有得到它的工作： alt text

來源

2010-08-29 Poru

首先，請確保您的文檔擔任XHTML，而不是HTML。否則，SVG剪裁將不起作用。修復您的網址以使用&而不是&。

然後，刪除clipPathUnits="objectBoundingBox"或者您將無法獲得絕對座標。最後，通過使用以下幾點來修復你的路徑，這些點應該得到你需要的形狀：0,20 125,0 250,20 375,0 500,20 500,300 0,300。

最後文件將是這樣的：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
<body> 
<style type="text/css"> 
#div { background: #ffffff; width: 500px; height: 300px; padding: 10px; } 
#div img { background: #000000; } 
</style> 

<div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&amp;zoom=14&amp;size=500x300&amp;sensor=false" alt="" class="t" /></div> 

<style>.t { clip-path: url(#c1); }</style> 
<svg:svg height="0"> 
    <svg:clipPath id="c1"> 
    <svg:polyline points="0,20 125,0 250,20 375,0 500,20 500,300 0,300" /> 
    </svg:clipPath> 
</svg:svg> 

</body> 
</html>

來源

2010-08-29 15:33:56

火狐SVG：剪輯

回答

相關問題