SVG作爲IE背景圖像與縮放

我已經SVG用作背景圖像：SVG作爲IE背景圖像與縮放

<div class="buble"></div>

和CSS：

.buble 
{ 
    background-image: url(https://beta.creasoft.cz/Images/buble-small.svg); 
    background-repeat: no-repeat; 

    width: 48px; 
    height: 48px; 
}

當顯示在IE 11和縮放（設定的縮放至105％或更多），它看起來破碎：在Chrome

工作正常。有沒有辦法解決它？

https://codepen.io/raptor/pen/WZoYBB

來源

2017-09-25 Raptor

IE11不支持SVG圖像的縮放時明確指定viewBox，width和height屬性。在你的情況下，你給圖像width和height的48px，IE11將不想正確縮放。

要修復它，你可以使用一個容器。你需要做的第一件事是構建容器來容納你的SVG。現在

<div id="container"> 
    <div class="buble"></div> 
</div>

你要定義你的容器，並添加width: 100%到.buble格，或SVG。

#container { 
    width: 48px; 
    height: 48px; 
} 
.buble { 
    width: 100%; 
    height: 100%; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url('https://beta.creasoft.cz/Images/buble-small-test.svg'); 
}

您可能還需要確保height和width從實際的SVG文件本身刪除，如果它包含它。您可以結帳this GitHub repo瞭解更多關於SVG's + IE的信息。

來源

2017-09-25 07:22:26

嗯，不起作用。試圖創建固定大小的簡單包裝，但背景圖像不顯示在裏面。內聯svg與引用的一樣。 https://codepen.io/raptor/pen/xXRMMv/ – Raptor

如果你可以使用內聯（甚至是'img'）SVG而不是背景，那就容易了。看到這個[CodePen]（https://codepen.io/anon/pen/yzVwGB）。 –

這個「buble」用於整個網絡的多個地方，它只是「背景」圖像。它上面有文字等，所以我只想用CSS來使用它。我不想多次嵌入它。我現在明白，縮放在IE中是個問題，但仍然必須有一些解決方法。例如，這個更好。只有105％被打破。 https://codepen.io/raptor/pen/YrpgJE – Raptor

SVG作爲IE背景圖像與縮放

回答

相關問題