2

SVG のクリップ パスでクリップされた画像があります。

http://codepen.io/mjjwatson/pen/GopNaj

このペンを装備して、4 秒ごとに画像のズーム クラスを切り替えます。幅に遷移があるため、クリップパスが同じままで、画像の幅が 42% から 100% にアニメーション化され、画像のズーム効果が作成されると予想されます。ただし、Chrome では更新に問題があるように見えます。ブラウザのサイズを変更すると、幅が変化するのがわかりますが、アニメーションは表示されません。

画像の変換スケーリングも試しました：

image { transform: scale3d(1.2,1.2,1); }

これにより、画像がスケーリングされ、必要に応じてアニメーション化されますが、クリップパスもスケーリングされます。

クリップパスを所定の位置に保ちながら、この画像ズーム効果を実現する別の解決策はありますか、それとも再考する必要がありますか?

4

1 に答える 1

4

Robert Longson と Nenad Vracar のコメントの組み合わせが、この解決策に役立ちました。

この codepen フォークに見られるように、グループ要素にクリップパスを配置しながら、変換スケール プロパティを画像に配置できます。

http://codepen.io/mjjwatson/pen/eJpgJx

   <g class="slideshow" data-speed="1000" clip-path="url(#mask-1)">

        <image class="slide" preserveAspectRatio="xMidYMid slice" x="0"  height="100%"  width="42%" xlink:href="http://lorempixel.com/900/500/abstract/1" />

    </g>
于 2015-12-12T13:50:31.663 に答える