svg背景圖像的位置始終以Internet Explorer爲中心，儘管背景位置：左中心;

我使用SVG徽標作爲背景圖像，我似乎無法在Internet Explorer （編輯：和Safari）中正確對齊左側。svg背景圖像的位置始終以Internet Explorer爲中心，儘管背景位置：左中心;

容器看起來像這樣：

<div id="header"> 
    <div id="logo"></div> 
</div>

隨着風格：

#header{ 
    width: 100%; 
    max-width: 1200px; 
    height: 100%;} 

#logo{ 
    background: url(../images/ss_logo.svg); 
    background-position: left center; 
    width: 100%; 
    height: 100%; 
    float: left;}

你可以看到<div>應跨越其父的100％，但顯示徽標的左側元件。這在Chrome和Safari中運行良好，但徽標始終位於IE中<div id="logo">的中間。

信息似乎很難找到這個，有沒有其他人有同樣的問題？這個是example version of the problem的鏈接，綠框是SVG。

來源

2013-07-30 bluefantail

什麼版本的IE？ – koningdavid

你能舉一個這種行爲的一個活生生的例子嗎？ –

在IE 10中得到這個問題，但也只是注意到它在Safari瀏覽器相同。 – bluefantail

125

問題不在於你的CSS，而在於你的SVG。 SVG將會增長以填充整個元素框的背景（如預期的那樣）。如何使你的SVG規模則成爲控制因素：

您<svg>元素上設置一個viewBox="0 0 width height"（像素）的屬性並刪除其width和height屬性。您還需要在svg元素上設置preserveAspectRatio="xMinYMid"（x /垂直左對齊，y /水平中間對齊）。這至少適用於Internet Explorer 10和11。

<svg viewbox="0 0 64 64" 
    preserveAspectRatio="xMinYMid"> 
    … </svg>

瞭解更多關於preserveAspectRatio和viewBox屬性。來源，「Getting started with SVG」 in the IEblog。

來源

2014-09-14 21:02:15 Aeyoun

我從這個[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio]中得到的是，不能用css＆必須完成背景位置設置在SVG本身。它是否正確？如果是這樣，那只是血腥的不便。有沒有辦法解決？ –

編輯svg以獲得適當的定位是一件痛苦的事，但一旦你知道小麥做什麼，這不是一個主要問題。我發現這個極好的教程：http：//tutorials.jenkov.com/svg/svg-viewport-view-box.html –

好用catchAspectRatio！只是改變了這個最好的答案，歡呼。 – bluefantail

-3

原來以下行可以將您的SVG成非中心元素：

display: inline-block;

仍然不是最理想的解決方案，但它的工作原理。

來源

2014-10-24 16:02:27

一個元素的顯示屬性與它的背景屬性無關。我希望看到讓你相信的其他來源。 –

Habib的情況是，當他將容器的顯示屬性更改爲內聯塊時，寬度從100％變爲內容的寬度。所以如果容器很寬，現在已經變窄了，圖像**可能看起來好像不再居中。然而，正如@CrystalMiller所指出的，事實並非如此。 –

-2

解決方案：嘗試另一個.SVG，這裏一些樣本頭：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve">

來源

2014-11-21 12:45:45 Rechtsamwald

IE 8-11，在不重複背景放置SVG時，自動偶數襯層的左側和右側將其縮放以適合。這會在圖像級別創建圖像的居中效果。含義：它擴大圖像兩側的空白區域以填充容器。

然後新圖像是其元素寬度的100％。這就是爲什麼position：left沒有效果，它已經被填充了。

背景元素的容器必須受到限制，以防止過度擴展（通過填充）。例如：最大寬度

div#logo{ 
    background-image: url(/img/logo.svg) no-repeat; 
    max-width: 140px; 
    margin: 0 auto auto 0; 
}

的圖像將仍然是140px內居中，但它將不再浮出超過這一點。

來源

2015-03-25 21:28:16 ppostma1

在我的情況下，添加「寬度」&「高度」 - 值解決ie9-11上的問題。

來源

2015-04-24 10:17:23

對我來說，寬度和高度都必須設置爲像素值（不使用「自動」）。 –

同樣解決了我的問題 –

接受的答案是訣竅，但這是另一種解決方案。

在SVG中包含維度，以便它們與視圖維度相同。

width="496px" height="146px" viewBox="0 0 496 146"

如果你像我一樣，你編輯/保存您的SVG的Illustrator中，取消選中「有求必應」複選框，在高級選項中保存對話框。然後尺寸將被包括在內。

（因爲它是可擴展的，它的定義「響應」，所以此設置似乎有點多餘。）

來源

2016-03-20 23:46:20

我想出了相同的解決方案。此外，Chrome開始顯示確切的大小。 –

svg背景圖像的位置始終以Internet Explorer爲中心，儘管背景位置：左中心;

回答

相關問題