インライン SVG を親コンテナに比例してスケールするにはどうすればよいですか?

親コンテナに比例してインライン SVG をスケールする

親コンテナに比例してインライン SVG スケールを設定すると、SVG のサイズを動的に変更する便利な方法になりますコンテンツ。これは、HTML 要素内に SVG グラフィックを埋め込み、それらが適切に拡大縮小されるようにする必要がある場合に適しています。これを実現する方法は次のとおりです。

<svg viewBox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50" />
</svg>

この例では、viewBox 属性で定義されているように、SVG 要素の幅は 100、高さは 50 です。 Polygon 要素は、SVG の幅と高さ全体にわたる三角形を表します。

viewBox 属性は、SVG のコンテンツの座標を指定します。この場合、座標の範囲は水平方向に 0 ～ 100、垂直方向に 0 ～ 50 になります。 CSS を使用して SVG 要素のサイズを変更した場合でも、三角形は常に viewBox 領域全体を埋めます。

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

SVG 要素の幅を設定することで、含まれる要素の希望のサイズを指定できます。高さは SVG のアスペクト比を維持するように自動的に調整され、三角形が比例的に拡大縮小されたままになります。

このアプローチにより、外部ファイルを使用したりスタイルを犠牲にしたりすることなく、HTML 要素内に SVG を埋め込み、そのサイズを動的に制御できます。オプション。

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