帶有viewBox和width的SVG在IE中沒有正確縮放高度

我試圖用viewBox屬性構造內聯SVG，但沒有顯式寬度或高度屬性。我使用CSS將SVG的寬度設置爲100％。這應該讓SVG縮放到包裝容器，保持由viewBox設置的寬高比。在Chrome和Firefox中，這個功能完美無缺！帶有viewBox和width的SVG在IE中沒有正確縮放高度

這裏就是我談論的最小codepen例如： http://codepen.io/pcorey/pen/amkGl

HTML：

<div> 
    <svg viewBox="0 0 100 10"> 
    <text x="1" y="9">hello</text> 
    </svg> 
</div>

CSS：

div { 
    width: 400px; 
} 

svg { 
    width: 100%; 
    max-height: 100%; 
    outline: 1px solid tomato; 
} 

text { 
    font-size: 10px; 
}

視框爲100×10。外部div設置爲400px寬度。這意味着SVG的高度應該是（並且在Chrome/Firefox中）40px。但是，IE 11，寬度始終是150像素（甚至當DIV的寬度超過1500px ...）

有一個很好的方式在IE中解決這一問題？爲什麼IE不能正確處理未知高度？我可以使用「intrinsic aspect ratio」技巧，但這非常醜陋，需要另一個DOM元素，並且要求每次包裝器調整大小時重新計算填充頂部。

有關我爲什麼要做到這一點的詳細信息，我寫了一個快速的博客文章吧：http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/

感謝您的幫助！

來源

2014-10-09 pcorey

請參閱使用 Ana 2014-10-09 08:30:06

啊，是的，這將工作。我試過這樣做，但我正在使用計算像素填充。如果我使用百分比，它完美的作品。謝謝！ – pcorey 2014-10-09 15:41:12

一些瀏覽器（IE和Safari）會使用默認大小爲SVG，如果你不把一定的高度和寬度。那裏發生了什麼。你說得對，「內在的方面配給」是需要另一個Dom和css，如果我們能夠克服這個問題，它會很好。

還有就是這樣的解決方案，你可以計算並把正確的高度來填充，底部，這將給權「未知高度」你想要的。你可以看到一個完整的解決方案在這裏： http://codepen.io/tomkarachristos/pen/GZPbgZ

<!-- 
xMidYMin: Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport. 
slice : the entire viewport is covered by the viewBox and the viewBox is scaled down as much as possible, 
height: if you dont set >= 1px some browsers will not render anything. 
--> 
<div> 
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice" 
     width="100%" style="height: 1px;overflow: visible; 
     /*without js:padding-bottom:55%*/"><text>hello</text> 
    </svg> 
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice" 
     width="100%" style="height: 1px;overflow: visible;"><text>Age</text> 
    </svg> 
</div>

和javascript：

/* 
Here we do the hack. 
With the math type: percent * height/width 
we are adjust the total height of an element who is depend in width using the padding-bottom. 
You can put an inline padding-bottom if you want in html. 
*/ 

$(function() { 
    $('svg').each(function() { 
    var svg = $(this); 
    var text = svg.find('text'); 
    var bbox = text.get(0).getBBox(); 
    //the hack 
    var calcString = "calc(100% * " + bbox.height/bbox.width + ")"; 
    svg.css("padding-bottom",calcString); 

    svg.get(0).setAttribute('viewBox', 
          [bbox.x, 
          bbox.y, 
          bbox.width, 
          bbox.height].join(' ')); 
    }); 
});

來源

2016-05-06 14:10:56

一個解決辦法應該在所有的瀏覽器是一個空白圖像添加到您的SVG坐鎮內線的容器，具有相同尺寸的SVG：

.wrap { 
 
    position: relative; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.viz { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="wrap"> 
 
    <img src="img/blank.png" /> 
 
    <div class="viz"> 
 
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 1000 600"></svg>    
 
    </div> 
 
</div>

在這種情況下，圖像應該由600px的具有1000像素自然尺寸和是透明的（或符合.wrap容器的背景）。這將適合svg所在的容器的大小。 .viz元素的絕對位置將允許它位於圖像頂部，利用它的高度，因此沒有任何東西被切斷。

來源

2016-11-08 18:33:11

帶有viewBox和width的SVG在IE中沒有正確縮放高度

回答

相關問題