IE svg縮放問題

在此website上，.logo-bar容器中有四個svg徽標。他們每個人的內放一個圖片代碼，像這樣：IE svg縮放問題

<div class="logo-bar"> 
    <p class="logo"> 
     <a href=""><img src="resources/img/miterassa_logo.svg" alt=""></a> 
    </p>

視框中設置每個SVG文件的內部：

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

IE11在Windows 7和Windows 8.1似乎並沒有按比例svg的正確。

在初始加載或刷新頁面後，現在或之後，只有一些徽標的縮放比例不正確。

P.S.我試圖在jsfiddle中重現問題，但問題從未出現過。

來源

2014-06-13 Marek

你不使用SVG ...你使用的圖像。如果你想使用SVG **元素**，把**代替鏈接而不是圖像。 –

從網絡標準的角度來看，在中使用svg是完全正常的，並且應該可以正常工作（如果沒有，您應該提交IE錯誤報告）。您是否嘗試過在css中設置元素的大小，並從svg根元素中刪除'width'和'height'屬性？ –

我們使用了很多SVG，並且因爲這樣的問題而禁止使用'width'和'height'。堅持SVG中的'viewBox'並讓包含DOM元素決定大小。 – ivarni

使用svg in < img>從web標準的角度來看是完全正常的，並且應該可以正常工作（如果沒有，你應該提交一個IE bugreport）。您是否嘗試過在css中設置img>元素的大小，並從svg根元素中刪除寬度和高度屬性？

適用於logo-class及其子女的stylerules也可能會影響結果。

來源

2014-06-18 11:51:06

您需要使用CSS設置SVG的高度和寬度。我建議加入瀏覽器和版本來使用這個身體標籤類：

// Loop through each of the available browsers 
jQuery.each(jQuery.browser, function(i, val) { 
if(val != true){ 
// Render the browser type 
     $(document.body).addClass("v"+parseInt(val)); 
    } 
// Render the browser version 
    else{ 
     $(document.body).addClass(i); 
    } 
});

然後添加這個CSS：

.msie.v9 svg, .msie.v10 svg { 
    width: 100%; 
    height:600px; // Add your own height here 
}

來源

2016-01-25 11:31:36

IE svg縮放問題

回答

相關問題