78

背景画像として SVG ロゴを使用していますが、Internet Explorer (編集: および 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 では正常に機能しますが、ロゴは常に<div id="logo">IE の中央に配置されます。

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

これは問題のサンプル バージョンへのリンクです。緑色のボックスは SVG です。

4

8 に答える 8

157

問題は CSS ではなく、SVG にあります。SVG は要素ボックスの背景全体を埋めるように拡大します (予想どおり)。SVG スケールがどのように制御因子になるか:

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

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

preserveAspectRatioおよびviewBox属性の詳細を確認してください。ソース、IEblog の「SVG 入門」。

于 2014-09-14T21:02:15.067 に答える
18

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

于 2015-04-24T10:17:23.993 に答える
16

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

ビューボックスの寸法と同じになるようにSVGに寸法を含めることも、うまくいきます。

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

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

(スケーラブルであるため、定義上「レスポンシブ」です。したがって、この設定は少し冗長に思えます。)

于 2016-03-20T23:46:20.487 に答える
16

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

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

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
于 2018-05-09T06:34:07.623 に答える
6

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-25T21:28:16.053 に答える
-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-21T12:45:45.843 に答える
-4

次の行で、svg を非中央揃えの要素に変えることができます。

display: inline-block;

まだ最も理想的なソリューションではありませんが、機能します。

于 2014-10-24T16:02:27.893 に答える