ホームページ > ウェブフロントエンド > CSSチュートリアル > Internet Explorer で SVG が正しく拡大縮小されないのはなぜですか?

Internet Explorer で SVG が正しく拡大縮小されないのはなぜですか?

Linda Hamilton
リリース: 2024-12-18 18:45:22
オリジナル
808 人が閲覧しました

Why Aren't My SVGs Scaling Correctly in Internet Explorer?

IE で SVG が適切にスケーリングしない - 余分なスペースがある

問題: 応答性のために SVG シンボルを使用すると、 Internet Explorer で SVG が適切に拡大縮小されない(IE).

答え: IE には、幅と高さの両方が指定されていない限り、SVG を正しく拡大縮小できないというバグがあります。

解決策:

ニコラスが発見したトリックを使用するギャラガー:

  1. <キャンバス> を追加します。 SVG と同じアスペクト比を持つ要素を <div> に追加します。 SVG を含む
  2. を作成します。
  3. SVG を <div> 内に絶対に配置します。
  4. コード:

    1

    <div>

    ログイン後にコピー

    CSS:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    canvas {

        display: block;

        width: 100%;

        visibility: hidden;

    }

     

    svg {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

    }

    ログイン後にコピー

    注: このトリックにより、IE は強制的に を使用すると SVG が正しく表示されます。参考として。

以上がInternet Explorer で SVG が正しく拡大縮小されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート