Javascript ScrollMagic，反向z索引顺序

我正在使用scrollmagic在您滚动时在svg Clippath之间切换。通常对于SVG（或div、sections或其他），您在html中指定的最后一个内容在z索引中位于顶部，但您在css中更改了这一点。我试着用我的svg来实现这一点，这样当第一个svg出现时，另一个svg会在它后面向上滚动。看起来scrollmagic阻止了我的z索引的工作。有什么想法吗

---

废话，我发了这篇文章后就明白了。我将z-index css声明更改为包装SVG的场景div上的z-index。成功了

---

废话，我发了这篇文章后就明白了。我将z-index css声明更改为包装SVG的场景div上的z-index。成功了

<div id="scene">

<svg id="svg1" height="500" width="800">
<image id="img1" xlink:href="http://placecage.com/800/500" x="0" y="0" width="800" height="500"/>
<defs>
    <clipPath id="clip1">
        <circle id="circle1" stroke="#000000" stroke-miterlimit="10" cx="400" cy="300" r="300" />
    </clipPath>
</defs>
</svg>

</div>

<div id="scene2">

<svg id="svg2" height="500" width="800">
<image id="img2" xlink:href="http://fillmurray.com/800/500" x="0" y="0" width="800" height="500"/>
<defs>
    <clipPath id="clip2">
        <circle id="circle2" stroke="#000000" stroke-miterlimit="10" cx="400" cy="300" r="300" />
    </clipPath>
</defs>
</svg>

</div>

#img1 {
clip-path: url(#clip1);
}

#img2 {
clip-path: url(#clip2);
}

#svg1, #circle1{
z-index: 2;
}

#svg2, #circle2{
z-index: 1;
}

#scene{
z-index: 2;
}

#scene2{
z-index: 1;
}