Internet Explorer 9 で SVG 画像の比率が異なるのはなぜですか?

Internet Explorer 9 での画像の縦横比のスケーリングの問題

CSS を使用して最大高さを指定している場合でも、Internet Explorer 9 では SVG 画像が予期しない縦横比で表示されることがよくあります。この矛盾は、さまざまな SVG ファイルの動作を比較すると明らかになります。

たとえば、自然なサイズが 200 ピクセル x 200 ピクセルで、最大高さが 30 ピクセルの SVG 画像が CSS で定義されているとします。

<code class="css">img {
    max-height: 30px;
}</code>

ほとんどのブラウザでは、この SVG 画像は 30 ピクセルの高さに比例して拡大縮小されます。ただし、Internet Explorer 9 では、代わりに 30x200 ピクセルとして表示される場合があります。

この問題は、使用されている SVG 要素のタイプに関連しているようです。問題のある SVG では、画像はポリゴンで構成されていますが、正しくスケーリングする SVG では、画像はパスで構成されています。

ブラウザ間で一貫したスケーリングを確保するには、常に viewBox を指定し、省略したままにすることをお勧めします。 SVG 要素の幅と高さの属性。この実践に従うことで、Internet Explorer 9 およびその他のブラウザーでの SVG 画像の互換性を向上させることができます。

以上がInternet Explorer 9 で SVG 画像の比率が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。