私は自分のウェブサイトでロゴを拡大縮小して背景を埋めようとしています。アイデアは、ブラウザのビューポート全体がロゴの中央に「飛び込む」必要があるということです。これを行うために、ロゴのSVGファイルを作成し、jQuerySVGを自分のサイトに含めました。
jQuery SVGアニメーションのコツをつかみ始めましたが、全体を中心から拡大縮小することはできません。調査中に、SVGをスケーリングするときに変換する必要があるという考えに出くわしましたが、アルゴリズムやjQueryanimateでの使用方法を完全には理解していません。
誰かが答えを提供することができれば、私は最も感謝するでしょう。
プロジェクトはここにあります（アニメーションの現在の状態とともに）：http ：//danieldunderfelt.com
これは実際にはCSSの問題です。初めに、あなたは使用しています
position: absolute;
top: 50%;
left: 50%;
margin: -60px 0 0 -50px;
小さなsvgを含むセクションを中央に配置します。これは、古い古典的なネガティブマージンのトリックです。
問題は、svgをスケールアップするときに、負のマージンを新しい（より大きな）高さと幅の半分に増やす必要があることです。これはまだ行っていません。それか、top値をゼロにアニメートして、物事を押し下げないようにします。これはsvg固有の問題ではありません。要素のスケールと、要素をページ上に配置しているcss値の両方をアニメーション化する必要があります。今、あなたは最初のことをしているだけです。
セクションの水平方向の中央揃えにmargin：autoを使用することをお勧めします。作業を節約してください。次に、topとの両方を設定top-marginして、アニメーションの最後に必要な場所に配置します。
PSこれにjquery-svgが必要かどうかはわかりません。マークアップでsvgインラインを記述しanimate()、アニメーション化されたcssの変更にjqueryを使用するだけです。