Html 定位被svg屏蔽的多个图像
我创建了一个动画，其中两个图像被两个不同的内联svg多边形遮罩。Img1出现，然后它的多边形Html 定位被svg屏蔽的多个图像,html,css,svg,Html,Css,Svg,我创建了一个动画，其中两个图像被两个不同的内联svg多边形遮罩。Img1出现，然后它的多边形将设置动画。然后出现Img2，后面是多边形动画。所有这些都正常工作，只是图像应该叠在一起，以便img2最终覆盖img1。Img2显示在img1下方 每个图像都是在一个中设置的，因此我尝试将每个设置在其自身的中，并将位置设置为绝对位置。我还研究了如何修改视图框。这两种方法都不起作用。很明显我错过了什么或者做错了什么。有人能帮忙吗 是一个可以说明问题的JSFIDLE 这是html： <body>
<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>
你必须绝对定位#img1遮罩和#img2任务
#img1Masked,
#img2Masked {
position: absolute;
top: 0;
left: 0;
}
你必须绝对定位#img1遮罩和#img2任务
#img1Masked,
#img2Masked {
position: absolute;
top: 0;
left: 0;
}
哼！愚蠢的初学者错误。非常感谢。哼！愚蠢的初学者错误。非常感谢。