IE9 で SVG が一部のみ正しくスケーリングされないのはなぜですか?

IE9 で特定の画像の SVG の比率が歪む

img 要素内で SVG を使用すると、予期しないスケーリングの問題が発生する可能性があります。 Internet Explorer 9 では、特定の SVG が正しく拡大縮小されず、元の比率が維持されないことがあります。これは、CSS で最大高さを指定しているにもかかわらず発生する可能性があります。

パスとポリゴンで構成される SVG を使用すると、不一致が発生します。たとえば、質問で言及されている「crocs.svg」画像は正しく拡大縮小されませんが、「groovy.svg」画像は正しく拡大縮小されます。

解決策: ViewBox を確認し、要素の幅/高さの属性を省略します

この問題を解決し、ブラウザ間で一貫したスケーリングを確保するには、SVG 要素内で viewBox 属性を常に指定することをお勧めします。ただし、幅と高さの属性は空白のままにしておきます。

これを行うことで、SVG のサイズを明示的に定義し、それに応じてブラウザが CSS の max-height プロパティを解釈できるようになります。これにより、さまざまなブラウザ間でより一貫したスケーリングが保証されます。

さらに理解するには、このテスト ページを参照してください: [テスト ページ リンク]。このページでは、SVG 属性と CSS の幅および高さの仕様を組み合わせたさまざまな例を提供します。さまざまなブラウザーでスケーリングを比較することで、これらの属性が SVG レンダリングに与える影響を観察できます。

以上がIE9 で SVG が一部のみ正しくスケーリングされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。