1

スクロールするときにsvgクリップパスをトゥイーンするためにscrollmagicを使用しています。通常、svgs (または div やセクションなど) では、html で最後に指定するものが z-index に関して一番上にありますが、それを css で変更します。私は自分の svg でこれをやろうとしたので、最初の svg がトゥイーンしている間、他の 1 つがその後ろにスクロールアップします。ただし、スクロールマジックが私の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;
}
4

1 に答える 1

0

がらくた、私はこれを投稿した後、文字通りそれを理解しました。z-index css 宣言を、svg をラップするシーン div の z-index に変更しました。それはうまくいきました。

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

#scene{
z-index: 2;
}

#scene2{
z-index: 1;
}
于 2015-12-03T17:17:18.180 に答える