アスペクト比を維持しながら、親コンテナに合わせてインライン SVG をスケーリングするにはどうすればよいですか?

親コンテナに合わせてインライン SVG をスケーリングする

インライン SVG は、ベクター グラフィックを HTML ドキュメントに直接追加できる柔軟性を提供します。ただし、アスペクト比を維持しながら親コンテナのサイズに合わせてコンテナをスケーリングするのは難しい場合があります。 viewBox 属性を使用してこれを実現する方法は次のとおりです。

インライン SVG スケールを作成するには、SVG 要素で viewBox 属性を使用します。この属性は、独自の座標系内で画像の境界ボックスを定義します。次に、幅と高さの属性を使用して希望の幅と高さを指定します。これらは、ページを含むページに相対的なものです。

10 ピクセル x 20 ピクセルの三角形を表示する次の例を考えてみましょう。

<svg viewBox="0 0 20 10">
    <polygon fill="red" stroke-width="0"
             points="0,10 20,10 10,0" />
</svg>

この SVG は、サイズに関係なく、指定されたコンテナー内で 10 ピクセル x 20 ピクセルの三角形としてレンダリングされます。 viewBox 属性 (0 0 20 10) は、(0,0) が左上隅、(20,10) が右下隅となる画像の座標系を定義します。幅と高さの属性 (例には示されていません) を指定することで、アスペクト比を維持しながら、コンテナーを基準にして画像を希望のサイズに拡大縮小します。

以上がアスペクト比を維持しながら、親コンテナに合わせてインライン SVG をスケーリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。