Is it possible to mask an image with an inline svg drawn with a path?

Question

I'm needing to mask an image with an SVG element. I have a very detailed inline SVG element on my page, that I would like to use as a mask for an image that will be loaded. My SVG is drawn with a <path>. I would like to something similar to this example http://jsfiddle.net/pjgalbraith/cnLHE/. *I do notice that this example does not work in Chrome or IE9 for me though, only FF.

This is my basic structure.

  <div>
     <svg width="500" height="500">
        <mask id="myMask'>
           <g>
              <path/>
           </g>
        </mask>
     </svg>
     <img src="http://myImage.jpg" style="mask:url(#myMask);">
  </div>

I've tried adding a <mask> tag inside the SVG wrapping the group <g>, that did not work.

This makes my SVG graphic completely transparent though, so I assume it's trying to work, and the SVG is acting as a mask, but the image is not masked at all, just overlays the position. Does the <img> need to be inside of the <svg> or something like that?

Does anyone have SVG experience and would know how to do this? Every example I see uses simple rect or svg graphics to mask, but no paths. Maybe that's why? Thanks

Answer 1

You can get it to work pretty much everywhere if you put the image inside the svg, like this:

<svg width="220" height="220">
    <mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
      <linearGradient id="g" gradientUnits="objectBoundingBox" y2="0.5" x2="1" y1="0.5" x1="0">
        <stop stop-color="white" offset="0"/>
        <stop stop-color="white" stop-opacity="0" offset="1"/>
      </linearGradient>
      <rect id="svg_1" height="1" width="1" y="0" x="0" stroke-width="0" fill="url(#g)"/>
    </mask>
<image xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" width="100%" height="100%" class="target"/>
</svg>

Here's the updated fiddle showing this: http://jsfiddle.net/cnLHE/34/

To answer the question about having paths in a mask, that's just fine and is supported by all svg-capable browsers AFAIK.