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

mask, masking, svg

Solution

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.

Problem

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

Original source