javascript - ScrollMagic，反向 z-index 顺序

Question

我在滚动时使用 scrollmagic 来补间 svg 剪辑路径。通常使用 svgs（或 div 或部分或其他），您在 html 中指定的最后一件事在 z-index 方面位于顶部，但您在 css 中更改它。我试图用我的 svgs 来做到这一点，这样当第一个 svg 补间时，另一个在它后面向上滚动。似乎 scrollmagic 正在阻止我的 z-indexing 工作。有任何想法吗？

http://codepen.io/kathryncrawford/pen/BoXOMJ

<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>

CSS

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

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

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

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

Answer 1

废话，我真的是在发布后才想出来的。我将 z-index css 声明更改为包装 svg 的场景 div 上的 z-index。那行得通。

http://codepen.io/kathryncrawford/pen/BoXOMJ

#scene{
z-index: 2;
}

#scene2{
z-index: 1;
}