Положение фона изображения svg всегда сосредоточено в Internet Explorer, несмотря на фоновое положение: левый центр;

Я использую логотип 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.

Ответ 1

Проблема связана не с вашим CSS, а с вашим SVG. SVG будет расти, чтобы заполнить весь фон ящиков элементов (как и ожидалось). Как ваша шкала SVG становится управляющим фактором:

Установите атрибут viewBox="0 0 width height" (в пикселях) в свой элемент <svg> и удалите его атрибуты width и height. Вам также необходимо установить preserveAspectRatio="xMinYMid" (x/вертикально выровненный по левому краю, y/по горизонтали по центру) в элементе svg. Это работает как минимум с Internet Explorer 10 и 11.

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

Подробнее о preserveAspectRatio и viewBox атрибутах. Источник, "Начало работы с SVG" в IEblog.

Ответ 2

В моем случае добавление значений "ширина" и "высота" решало проблемы на ie9-11.

Ответ 3

Принятый ответ работает, но тут другое решение.

Включение размеров в SVG, чтобы они были идентичны размерам окна просмотра, также помогает.

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

Если вы похожи на меня и редактируете/сохраняете SVG в Illustrator, снимите флажок "отзывчивый" в разделе "Дополнительные параметры" в диалоговом окне сохранения. Тогда размеры будут включены.

(Поскольку он масштабируемый, он "отзывчивый" по определению. Поэтому этот параметр кажется немного избыточным.)

Ответ 4

Если мы дадим размер фона, он будет работать в IE

ниже приведен пример кода

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

Ответ 5

IE 8-11 при размещении SVG в фоновом режиме без повтора автоматически выравнивает левую и правую стороны, чтобы масштабировать его до соответствия. Это создает центрирующий эффект изображения на уровне изображения. Значение: для заполнения контейнера расширяется пробел по обе стороны изображения.

Новое изображение будет на 100% шириной его элемента. Поэтому позиция: слева не действует, она уже оставлена с включенным дополнением.

Контейнер фонового элемента должен быть ограничен, чтобы предотвратить расширение (с помощью обрезки). Например: max-width

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

Изображение будет по-прежнему центрироваться в пределах 140 пикселей, но оно больше не будет выходить за пределы этой точки.

Ответ 6

Решение: попробуйте другой .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">

Ответ 7

Оказывается, следующая строка может превратить ваш svg в нецентрированный элемент:

display: inline-block;

Все еще не самое идеальное решение, но оно работает.