將SVG蒙版應用於圖像

嗨我一直在這個問題上停留了一段時間。將SVG蒙版應用於圖像

基本上我試圖按照this MDN article和this example這也解釋瞭如何使用面具 CSS屬性，並與Firefox嵌入SVG圖像掩蓋的元素。

<style>.target { mask: url(#m1); }</style> 

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" /> 

<svg width="220" height="220"> 
<mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1"> 
<linearGradient y2="0.5" x2="0.6" y1="0.5" x1="0" id="g"> 
    <stop stop-color="white" offset="0"/> 
    <stop stop-opacity="0" stop-color="white" offset="1"/> 
</linearGradient> 
<rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/> 
</mask> 
</svg>

您可以在這裏看到我的嘗試http://jsfiddle.net/pjgalbraith/cnLHE/。正如你所看到的，它只是顯示一個空白圖像。

來源

2012-02-28 P. Galbraith

這裏

<rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/>

x和y應該大於0且小於1，並且沒有梯度，因爲高度和寬度應小於

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
<body> 

    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" /> 


    <style>.target { mask: url(#m1); } </style> 

    <svg:svg width="220" height="220"> 
    <svg:mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1"> 
     <svg:linearGradient id="g" gradientUnits="objectBoundingBox" y2="0.5" x2="0.6" y1="0.5" x1="0"> 
     <svg:stop stop-color="white" offset="0"/> 
     <svg:stop stop-color="white" stop-opacity="0" offset="1"/> 
     </svg:linearGradient> 
     <svg:rect id="svg_1" x="0.5" y="0.2" width="0.5" height="0.8" stroke-width="0" fill="url(#g)"/> 
    </svg:mask> 
    </svg:svg> 

</body> 
</html>

來源

2012-02-28 13:47:01 gidzior

由於這是很有意義的。但它仍然對我顯示空白。見http://jsfiddle.net/pjgalbraith/cnLHE/13/ – 2012-02-28 15:16:52

給我你的郵件我會發送給你一個工作文件 – gidzior 2012-02-29 09:26:10

你可以在github上創建一個要點（http://gist.github.com/）。我很想看到工作文件。如果它是公開的，那麼其他人可以受益。我無法在此網站上發送下午，我寧願不要在此發佈我的電子郵件。 – 2012-02-29 12:16:45

將SVG蒙版應用於圖像

回答

相關問題