title: Is it possible to mask an image with an inline svg drawn with a path?
body: <p>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 <code>&lt;path&gt;</code>. I would like to something similar to this example <a href="http://jsfiddle.net/pjgalbraith/cnLHE/" rel="nofollow">http://jsfiddle.net/pjgalbraith/cnLHE/</a>. *I do notice that this example does not work in Chrome or IE9 for me though, only FF.</p>
  
  <p>This is my basic structure.</p>
  
  <pre><code>  &lt;div&gt;
       &lt;svg width="500" height="500"&gt;
          &lt;mask id="myMask'&gt;
             &lt;g&gt;
                &lt;path/&gt;
             &lt;/g&gt;
          &lt;/mask&gt;
       &lt;/svg&gt;
       &lt;img src="http://myImage.jpg" style="mask:url(#myMask);"&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I've tried adding a <code>&lt;mask&gt;</code> tag inside the SVG wrapping the group <code>&lt;g&gt;</code>, that did not work.</p>
  
  <p>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 <code>&lt;img&gt;</code> need to be inside of the <code>&lt;svg&gt;</code> or something like that?</p>
  
  <p>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</p>