Question

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

每张图片都设置在<svg>内，因此我尝试在其<svg>内设置每个<div>并将位置设置为绝对值。我还考虑修改<svg>视图框。这些都没有奏效。显然我错过了什么或做错了什么。有人可以帮忙吗？

Here是一个解决问题的工作方式。

这是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; 
}

Answer 1

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

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

定位由svg屏蔽的多个图像

1 个答案: