「viewBox」、「width」、および「height」を使用して、親コンテナに合わせてインライン SVG をスケールするにはどうすればよいですか?

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

インライン SVG (Scalable Vector Graphics) 要素を操作する場合、多くの場合、コンテナの寸法に合わせて SVG をスケーリングする必要があります。その親コン​​テナ。外部 SVG ファイルを参照してスケーリングを実現することは可能ですが、この方法では CSS を使用して SVG をスタイル設定する機能が制限される可能性があります。したがって、より望ましい解決策は、インライン SVG を直接拡大縮小することです。

viewBox で画像座標を定義し、幅/高さで拡大縮小する

SVG 画像の内部座標を定義し、その拡大縮小方法を決定するにはでは、次の属性を使用します:

• viewBox:画像の境界ボックスを独自の座標系で定義します。
• width: 含まれているページを基準とした単位での SVG の幅。
• height: 含まれているページを基準とした単位での SVG の高さ。

たとえば、次のように考えます。次の赤い三角形のインライン SVG:

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

ここに次のものがあります:

• viewBox (0, 0, 20, 10): SVG が長方形を持つことを指定します。幅 20 単位、高さ 10 単位の境界ボックス。
• 幅 (10): SVG の幅が、含まれているページに対して 10 単位であることを指定します。
• 高さ (20): SVG の高さが、含まれているページに対して 20 単位である必要があることを指定します。

この SVG は、幅 10 ピクセル、高さ 20 ピクセルの赤い三角形としてレンダリングされます。

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