ホームページ >ウェブフロントエンド >CSSチュートリアル >SVG 変換の順序は、結果として生じる形状の歪みにどのような影響を与えますか?
変換の順序と結果の歪み
SVG では、変換属性が要素に適用されると、要素のコピーが取得されます。現在のユーザー座標系。その後、後続の変換が順番に適用され、それぞれが前の状態から座標系を変更します。
この変換の順序は、最終的な出力に大きく影響します。指定された引用符で示されているように、
変換による歪みSequence
提供されたコードの例を考えてみましょう。2 つの長方形が変換されます:
Rectangle 1: Scale(2, 1) then Rotate(10deg)
長方形 2: Rotate(10deg) then Scale(2, 1)
Rectangle 1 は、変換の特定の順序により歪んでいるか、歪んでいます。要素がスケーリングされると、その現在の座標系がまず水平方向に引き伸ばされます。この新しい座標系は 10 度回転されます。その結果、長方形は事実上歪んでいます。
対照的に、長方形 2 は、変換順序が逆であるため、歪んでいません。最初の 10 度の回転により、スケーリングが行われる前に座標系が変更されます。したがって、スケーリングは、歪みを回避しながら、新しい回転軸に沿って長方形を引き伸ばすだけです。
技術的説明
最初にスケーリングが適用されると、要素の境界ボックスが拡大されます。または契約した。回転変換が適用されると、この変更された境界ボックス内で回転変換が行われます。これにより、スケーリングされたプロポーションに回転が適用されるときに、歪み効果が生じます。
逆に、最初に回転が適用されると、座標系の方向が変更されます。その後、この回転したシステムにスケーリングが適用され、新しい軸に沿って伸縮が確実に発生し、歪みのない長方形が得られます。
変換の順序と相互作用を理解することで、変換を連鎖させる理由が明らかになります。この例で見られるように、シーケンスが異なると結果も変化する可能性があります。
以上がSVG 変換の順序は、結果として生じる形状の歪みにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。