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

親コンテナを使用したインライン SVG のスケーリング

インライン SVG 要素を HTML コードに組み込むと、CSS でスタイルを設定できるという利点があります。ただし、このような SVG 要素を親コンテナのサイズに合わせてスケーリングするのは難しい場合があります。

解決策

インライン SVG を親コンテナに合わせてスケーリングするには、次のようにします。 viewBox 属性を幅と高さと組み合わせて使用​​するために必要です属性:

1. viewBox 属性: この属性は、独自の座標系内で SVG 画像の境界ボックスを定義します。 SVG 画像のアスペクト比と初期寸法を設定します。この属性を設定すると、スケール サイズとは関係なく SVG 画像内の座標を指定できます。
2. 幅と高さの属性: これらの属性は、画像内の SVG 要素の幅と高さを指定します。を含むページ。ページ上に表示される SVG 画像のサイズを制御します。これらの属性をコンテナの寸法に相対的に設定することで (パーセンテージを使用するなど)、SVG 画像を比例的に拡大縮小できます。

たとえば、次のコードを考えてみましょう:

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

この例では、ネイティブ サイズ 123 ピクセル x 456 ピクセルの SVG 画像がコンテナ全体を満たすように拡大縮小されます。 viewBox 属性は SVG 画像自体内のポリゴンの座標を定義し、width 属性と height 属性は SVG 画像をコンテナの寸法に合わせて拡大縮小します。その結果、ポリゴンはコンテナ内で幅 100% の赤い三角形としてレンダリングされます。

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