我创建了一个动画，其中 2 个图像被两个不同的内联 svg 多边形遮盖。 Img1 出现，然后它的多边形 <clipPath>动画。然后出现 Img2，然后是它的多边形 <clipPath>动画。所有这些都按预期工作，除了图像应该堆叠在一起，以便 img2 最终覆盖 img1。 Img2 而是显示在 img1 下方。
每个图像都设置在 <svg> 中，所以我尝试设置每个 <svg>在它自己的内部 <div>并将位置设置为绝对。我也研究过修改 <svg> View 框。这些事情都没有奏效。显然我遗漏了什么或做错了什么。有人可以帮忙吗？
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;
}
最佳答案
你必须绝对定位#img1Masked 和#img2Masked。
#img1Masked,
#img2Masked {
position: absolute;
top: 0;
left: 0;
}
关于html - 定位被 svg 遮盖的多个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34272629/