Is it possible to mask an image with the built-in svg drawn using the path?

Question

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

This is my main 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 tried adding the <mask> inside the SVG, which wraps the group <g> , which does not work.

This makes my SVG graphics completely transparent, therefore, I assume that it is trying to work, and SVG acts like a mask, but the image is not masked at all, it just overlays the position. Does <img> need to be inside <svg> or something like that?

Does anyone have SVG experience and will know how to do this? Every example I see uses simple rectangular or svg graphics to mask, but there are no paths. Maybe why? Thanks

Answer 1

You can make it work almost everywhere if you put the image inside svg, for example:

 <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 an updated fiddle showing this: http://jsfiddle.net/cnLHE/34/

To answer the question about the presence of paths in the mask, this is just fine and is supported by all browsers that support AFAIK svg.