title: Masking an image with an existing SVG path
body: <p>I have a set of SVG paths which make up a logo.</p>
  <p>Then, I want to have several images (to appear as the SVG) which slide through gradually. My problem is that I cannot make them work as the background, in other words, I want the SVG to mask the image(s).</p>
  <p>I have a SVG like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;svg class=&quot;polygon&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;225.533px&quot; height=&quot;261.262px&quot; viewBox=&quot;0 0 225.533 261.262&quot; style=&quot;enable-background:new 0 0 225.533 261.262;&quot; xml:space=&quot;preserve&quot;&gt;
    &lt;g id=&quot;svg-draw&quot;&gt;
      &lt;path data-name=&quot;nav-projects&quot; data-href=&quot;&lt;?php print JUri::base() ?&gt;projects&quot; data-ajax=&quot;true&quot; class=&quot; st4 hover-logo&quot; d=&quot;M26.05,147.366c-4.384,10.375-21.823,47.717-24.713,71.831c-2.804,23.373,2.034,40.255,27.625,37.926c6.952-0.97,15.662-4.346,24.417-9.214&quot;&gt;&lt;/path&gt;
    &lt;/g&gt;
    &lt;image clip-path=&quot;url(#svg-draw)&quot; height=&quot;100%&quot; width=&quot;100%&quot;  xlink:href=&quot;&lt;?php print THEME_URL.&quot;/img/rev1.jpg&quot;; ?&gt;&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>And if you notice, I have put the <code>image</code> tag right inside the SVG. But nothing happens. I also have removed most of the Paths of the svg in the above example, because they are too long to be copied here.</p>
  <p>I used the <code>clip-path</code> property of the image, but to no avail.</p>