定位被 svg 屏蔽的多个图像答案

【问题标题】：positioning multiple images that are masked by an svg定位被 svg 屏蔽的多个图像
【发布时间】：2016-03-20 06:20:16
【问题描述】：

我创建了一个动画，其中 2 个图像被两个不同的内联 svg 多边形掩盖。 Img1 出现，然后它的多边形<clipPath> 动画。然后出现 Img2，然后是其多边形 <clipPath> 动画。所有这些都正常工作，除了图像应该堆叠在一起，以便 img2 最终覆盖 img1。 Img2 反而出现在 img1 下方。

每个图像都设置在<svg> 中，因此我尝试将每个<svg> 设置在其自己的<div> 中并将位置设置为绝对位置。我还研究过修改<svg> 视图框。这些事情都没有奏效。显然我错过了什么或做错了什么。有人可以帮忙吗？

Here 是一个说明问题的工作 jsfiddle。

这是html：

<body>
    <div id="container">
    <div id="border"></div>
      <!--------masked images-------->
      <div id="img1Masked">
        <svg width="300" height="250" viewbox="0 0 300 250">
          <image xlink:href="https://static.dvidshub.net/media/thumbs/photos/1210/692947/463x486_q75.jpg" x="0" y="0" width="463" height="486" />
        </svg>
      </div>

      <div id="img2Masked">
        <svg width="300" height="250" viewbox="0 0 300 250">
          <image xlink:href="http://edinspace.weebly.com/uploads/5/8/4/4/5844875/3183867_orig.jpg" x="0" y="0" width="933" height="622" />
       </svg>
      </div>
      <!--------polygon clipPaths-------->
      <svg class="svg-defs">
        <defs>
          <clipPath id="clippingImg1">
            <polygon id="img1Shape" points="90 250,302 250,299 -3,138 -3"/>
          </clipPath>
        </defs>
        <defs>
          <clipPath id="clippingImg2">
            <polygon id="img2Shape" points="105 251,301 253,301 -3,66 -3"/>
          </clipPath>
        </defs>
      </svg>
    </div>

    <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>

</body>

还有 CSS：

#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; 
}

【问题讨论】：

标签： html css svg

【解决方案1】：

你必须绝对定位#img1Masked 和#img2Masked。

#img1Masked,
#img2Masked {
  position: absolute;
  top: 0;
  left: 0;
}

【讨论】：

呃！愚蠢的初学者错误。谢谢！！