SVGビューボックスは常に幅と高さにスケーリングされない

Question

私はいくつかのライブラリを使用してブラウザ内のSVGイメージを生成しています。これはサーバーからsvgexportを通してバウンスされ、ユーザー指定の解像度でPNGまたはJPEGを生成できます。 （これは期待通りに機能します）

変換に使用されるSVGをダウンロードするオプションを、幅と高さの属性を設定するための解像度で使用したいと考えています。これを行うと、ビューボックスは指定された幅と高さにスケーリングされませんが、画像が左上の元のサイズの領域を占めるようにパディングされます。

ソリューションを探しているうちに、問題を説明するイメージがW3Cのドキュメントに見つかりました。あなたがChromeでこれらの画像を開いて、幅と高さのプロパティを変更するには、インスペクタを使用している場合は、

• ViewBox.svgは
• PreserveAspectRatio.svgがに滞在する埋められます（hereからリンクされている）の幅と高さを埋めるために拡張されます（hereからリンクされている）左上

この存在またはpreserveAspectRatioプロパティの値、またはsvgタグの入れ子に関連する表示されません。私のファイルは、Chrome/Chromium、Firefox、Safari/WebKit、Opera、Inkscape、Gapplinではなく、パッドで表示されます。

SVGの幅と高さを埋め込むために埋め込まれるのではなく、SVGのスケーリングが確実に行われるようにするにはどうすればよいですか？

Answer 1

viewBoxではなく、viewboxと入力したとき、ビューボックスのスケーリングが行われません。 svg属性名では大文字と小文字が区別されます。

2番目のリンクにはviewBox属性がなく、ビューボックス（小文字）属性を追加しても効果はありません。