title: positioning multiple images that are masked by an svg
body: <p>I've created an animation where 2 images are being masked by two different inline svg polygons. Img1 appears, then its polygon <code>&lt;clipPath&gt;</code> animates. Img2 then appears, followed by its polygon <code>&lt;clipPath&gt;</code> animating. All of this is working as it should, except that the images should be stacked on top of each other so that img2 ultimately covers up img1. Img2 instead appears below img1. </p>
  
  <p>Each image is set within an <code>&lt;svg&gt;</code>, so I've tried setting each <code>&lt;svg&gt;</code> within its own <code>&lt;div&gt;</code> and setting the position to absolute. I've also looked into modifying the <code>&lt;svg&gt;</code> viewbox. Neither of these things has worked. Clearly I'm missing something or doing something wrong. Can someone help? </p>
  
  <p><a href="http://jsfiddle.net/cbaozb8s/" rel="nofollow">Here</a> is a working jsfiddle that illustrates the problem.   </p>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
      &lt;div id="border"&gt;&lt;/div&gt;
        &lt;!--------masked images--------&gt;
        &lt;div id="img1Masked"&gt;
          &lt;svg width="300" height="250" viewbox="0 0 300 250"&gt;
            &lt;image xlink:href="https://static.dvidshub.net/media/thumbs/photos/1210/692947/463x486_q75.jpg" x="0" y="0" width="463" height="486" /&gt;
          &lt;/svg&gt;
        &lt;/div&gt;
  
        &lt;div id="img2Masked"&gt;
          &lt;svg width="300" height="250" viewbox="0 0 300 250"&gt;
            &lt;image xlink:href="http://edinspace.weebly.com/uploads/5/8/4/4/5844875/3183867_orig.jpg" x="0" y="0" width="933" height="622" /&gt;
         &lt;/svg&gt;
        &lt;/div&gt;
        &lt;!--------polygon clipPaths--------&gt;
        &lt;svg class="svg-defs"&gt;
          &lt;defs&gt;
            &lt;clipPath id="clippingImg1"&gt;
              &lt;polygon id="img1Shape" points="90 250,302 250,299 -3,138 -3"/&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
          &lt;defs&gt;
            &lt;clipPath id="clippingImg2"&gt;
              &lt;polygon id="img2Shape" points="105 251,301 253,301 -3,66 -3"/&gt;
            &lt;/clipPath&gt;
          &lt;/defs&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
  
      &lt;script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#container {
      position:relative;
      width:300px;
      height:250px;
      background-color:#fff;
      overflow:visible;
  }
  #img1Masked image{
      position:absolute;
      clip-path: url(#clippingImg1);
      opacity:0;
      top:0;
      left:0;
  }
  #img2Masked image{
      position:absolute;
      clip-path: url(#clippingImg2);
      opacity:0;
      top:0;
      left:0;
  }
  .svg-defs {
      position: absolute;
      width: 0;
      height: 0;
  }
  #border{ 
      position:absolute; 
      width:298px; 
      height:248px; 
      border:solid 1px #000; 
  }
  </code></pre>