title: Apply SVG mask to image
body: <p>Hi I have been stuck on this problem for a while now. </p>
  
  <p>Basically I am trying to follow <a href="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content" rel="nofollow">this MDN article</a> and <a href="https://developer.mozilla.org/@api/deki/files/3213/=maskdemo.xhtml" rel="nofollow">this example</a> which explains how to mask an element using the <em>mask</em> CSS property and an embedded SVG image with Firefox.</p>
  
  <pre><code>&lt;style&gt;.target { mask: url(#m1); }&lt;/style&gt;  
  
  &lt;img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" alt="" class="target" /&gt;
  
  &lt;svg width="220" height="220"&gt;
  &lt;mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1"&gt;
  &lt;linearGradient y2="0.5" x2="0.6" y1="0.5" x1="0" id="g"&gt;
      &lt;stop stop-color="white" offset="0"/&gt;
      &lt;stop stop-opacity="0" stop-color="white" offset="1"/&gt;
  &lt;/linearGradient&gt;
  &lt;rect id="svg_1" height="220" width="220" y="0" x="0" stroke-width="0" fill="url(#g)"/&gt;
  &lt;/mask&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>You can see my attempt here <a href="http://jsfiddle.net/pjgalbraith/cnLHE/" rel="nofollow">http://jsfiddle.net/pjgalbraith/cnLHE/</a>. As you can see it just displays a blank image.</p>