web-dev-qa-db-ja.com

背景位置にかかわらず、svg背景画像の位置はInternet Explorerで常に中央に配置されます。左中央。

背景画像としてSVGロゴを使用していますが、Internet Explorerで左に正しく配置できないようです（edit：and Safari）。

コンテナは次のようになります。

<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">の中央に配置されます。

これに関する情報を見つけるのは本当に難しいようですが、他の誰かが同じ問題を抱えていましたか？

問題のバージョン例 へのリンクがあります。緑色のボックスはSVGです。

htmlcsssvg
68
bluefantail

問題はCSSではなく、SVGにあります。 SVGは要素ボックスの背景全体を埋めるように成長します（予想どおり）。 SVGスケールが制御要因になる方法：

viewBox="0 0 width height"要素に<svg>（ピクセル単位）属性を設定し、そのwidthおよびheight属性を削除します。 svg要素にpreserveAspectRatio="xMinYMid"（x /垂直に左揃え、y /水平に中央揃え）も設定する必要があります。これは、少なくともInternet Explorer 10および11で機能します。

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

preserveAspectRatio および viewBox 属性の詳細。ソース、 IEblogの「SVG入門」 。

147
Aeyoun

私の場合、「幅」と「高さ」の値を追加すると、ie9-11の問題が解決しました。

17
Marcus Mori Morba

受け入れられた答えは機能しますが、別の解決策があります。

SVGにディメンションを含めて、それらがビューボックスのディメンションと同一になるようにすることもトリックです。

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

私のように、IllustratorでSVGを編集/保存する場合は、保存ダイアログの[詳細オプション]で[レスポンシブ]チェックボックスをオフにします。次に、寸法が含まれます。

（スケーラブルであるため、定義により「レスポンシブ」です。この設定は少し冗長に見えます。）

12
Dennis Best

背景サイズを指定すると、IEで機能します

以下はサンプルコードです

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
11
Thomas Mathew

IE 8-11では、SVGを繰り返しなしでバックグラウンドに配置すると、左側と右側が自動的に均等化されて、収まるようにスケーリングされます。これにより、画像レベルで画像のセンタリング効果が作成されます。意味：画像の両側の空白を広げて、コンテナを埋めます。

新しい画像は、その要素の幅の100％です。これが、position：leftが効果を持たない理由です。すでにパディングが含まれています。

背景要素のコンテナは、（シミングを介して）過度に拡大しないように制限する必要があります。たとえば、max-width

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

画像は引き続き140pxの中央に配置されますが、そのポイントを超えてフロートすることはなくなります。

5
ppostma1