画像にSVGマスクを適用する

こんにちは私は今この問題を抱えています。画像にSVGマスクを適用する

基本的に私はマスク CSSプロパティとFirefoxが埋め込まれたSVG画像を使用して要素をマスクする方法について説明しthis MDN articleとthis exampleに従うことをしようとしています。

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

メールを送ってください私は作業ファイルをお送りします – gidzior

github（http://gist.github.com/）で要点を作成できますか？私は作業ファイルを見たいです。また、それが公的であれば、他者は利益を得ることができます。私はこのサイトで午後を送ることができず、私はここに私の電子メールを掲載したくない。上記 –

画像にSVGマスクを適用する

答えて

関連する問題