ScrollMagic，反向Z索引顺序

Question

I'm using scrollmagic to tween svg clippaths as you scroll. Usually with svgs(or divs or sections or whatever) the last thing you specify in your html is on top in terms of z-index, but you change that in css. I tried to do this with my svgs, so that while the first svg tweens, the other one scrolls up behind it. It seems like scrollmagic is preventing my z-indexing from working though. Any ideas?

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

Crap, I literally just figured it out after posting this. I changed the z-index css declaration to the z-index on the scene divs that wrap the svgs. That worked.

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

#scene{
z-index: 2;
}

#scene2{
z-index: 1;
}