DOM内のSvgは古いブラウザ（IE9、IE10、Safari 6）で縮尺されていません

Question

snap.svg（snapsvg.ioのjQueryプラグイン）を使用して.svgイメージを私のウェブサイトにロードしています。私のフォールバックがどこにあり、HTMLの構造を失うことなく、特定の要素をアニメーション可能にします。

Iが直面する問題は、画像が（例えばIE9、IE10、サファリ6）古いブラウザ

SVG特性のスケールではないということです。私はBrowserStackに放火犯をすることができる使用する場合

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 2100 1174.2" style="enable-background:new 0 0 2100 1174.2;" xml:space="preserve"> 

を外側のsvg要素が100％の幅であり、比率が失われていることを確認してください。ここ

私は（いくつかの絶望ととんでもない）試みたものの小さいリストである：

• アスペクト比を除去
ビューボックスを除去
• 幅を追加する幅（100％）
• 追加します（ 100％）と高さ（自動）
• レイヤーIDの名前変更（同じページに複数のsvg画像がある）

注目すべき：

• すべてのパスのスタイリングは
すべてがから
• 例を働いています<img>としてロードsvgs
• （私は証拠そのパディングとしてこの例を古いブラウザでの作業かかったん（Illustratorの輸出から）インラインです-hackingは

は事前

Answer 1

solutでいただき、ありがとうございます）必要はありませんイオンが見つかった！

これらの問題がある古いブラウザでは、高さがとの宣言が必要です。そのうちの一つ、デフォルト設定での結果（。高さは元IE9 150ピクセル）

を持っていない私はいくつかのJavaScript（jQueryの）を書き込むことによって、この問題を解決：

function setSvgHeight() { 
    $('svg').each(function() { 
     var viewBox = $(this).attr('viewBox').split(" "); 
     $(this).css("height", (($(this).parent().width()/viewBox[2]) * viewBox[3])); 
    }); 
} 

この機能は、すべての<svg>要素、リクエストをループviewBoxを使用して、svgの高さを計算された高さに設定します（比率を維持してください）。 これは、幅がcssですでに定義されているために機能します。上に示した

$(window).on("resize", function() { 
    setSvgHeight(); 
}); 

$(window).on("load", function() { 
    setSvgHeight(); 
}); 

トリガは、サイズ変更時の縦横比が同じに保つことを確認してください。高さを設定するための初期トリガーを与えます。

var interval = setInterval(function(){ 
    if($('.source').length == 0){ 
     setSvgHeight(); 
     clearInterval(interval); 
    } 
}, 50); 

私は私のフォールバック画像をカウントするために上記のよう間隔を書いて、私はインラインSVGでこれらのフォールバックの画像（クラス「フォールバック」を有する）を置き換えるプラグインを使用。フォールバックイメージの量が0になると、すべてがロードされ、高さを設定する機能が起動されたことを意味します。