規模嵌入式svg沒有空白在鉻

Question

我需要嵌入一個svg到html中，並以一種響應的方式設計它。對於常規圖像，這對我很好用：

img { 
    max-width: 100%; 
} 

img[height] { 
    height: auto; /* if the <img> tag provides a width keep aspect ratio */ 
} 

不幸的是，這不適用於嵌入式svgs。下面是一個例子，它是如何在img標籤中嵌入svg和svg的。

下面是一個例子的標記：

<div>Embedded SVG: 
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><circle cx="50" cy="50" r="50" /></svg> 
</div> 

<div>SVG as image tag: 
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIzMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiAvPjwvc3ZnPg0K" /> 
</div> 

和CSS：

div { 
    resize: both; 
    outline: 1px solid red; 
    margin-bottom: 3em; 
    padding: 1em; 
} 

svg, 
img { 
    display: block; 
    outline: 1px solid blue; 
    max-width: 100%; 
    height: auto; 
} 

縮小兩個圖像保存方面它們的比率，但嵌入SVG保持其原始高度（藍色輪廓）

如何避免嵌入式svg創建空白區域？

您可以在jsfiddle上找到示例。

我很想張貼截圖，但我沒有爲足夠的聲譽：/

編輯：錯誤只出現在鉻。相應地改變了標題