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

インライン SVG 要素を拡大縮小する方法

特定のシナリオでは、開発者は、インライン SVG 要素のサイズに合わせてインライン SVG 画像を動的に拡大縮小する必要がある場合があります。その親コン​​テナ。これは、外部 SVG ファイルを参照せずに実現でき、SVG のコンテンツに追加の CSS スタイルを適用できます。

インライン SVG をスケールするには、次の手順を使用します。

1. ビューボックス属性を指定します:
   座標内で画像の境界ボックスを定義しますSVG 要素の viewBox 属性を使用するシステム。値は、SVG の左上隅と右下隅の x 座標と y 座標を表します。
2. 幅と高さの属性を設定します:
   幅と高さを指定しますwidth 属性と height 属性を使用して、SVG を含むページ内に表示されるように SVG を設定します。これらの値は、SVG がどのように比例して拡大縮小するかを決定します。

たとえば、次のコードは 10 ピクセル x 20 ピクセルの境界ボックス内に三角形をレンダリングし、親コンテナに合わせて拡大縮小されます。

svg {
  border: 1px solid blue;
}

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

スケールされたサイズとは関係なく SVG 内の座標を指定することで、画像は比率を維持し、サイズに関係なく正しくレンダリングされます。コンテナのサイズ

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