Вопрос:

Положение фонового изображения svg всегда центрируется в Internet Explorer, несмотря на то, что background-position: left center;

html css svg

42767 просмотра

7 ответа

439 Репутация автора

Я использую логотип SVG в качестве фонового изображения, и я не могу заставить его правильно выровняться влево в Internet Explorer (edit: и 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.

Автор: bluefantail Источник Размещён: 30.07.2013 10:20

Ответы (7)


147 плюса

2814 Репутация автора

Решение

Проблема не в вашем 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 .

Автор: Aeyoun Размещён: 14.09.2014 09:02

-3 плюса

1 Репутация автора

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

display: inline-block;

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

Автор: Habib Khan Размещён: 24.10.2014 04:02

-2 плюса

1 Репутация автора

Решение: попробуйте другой .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">
Автор: Rechtsamwald Размещён: 21.11.2014 12:45

5 плюса

2922 Репутация автора

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, но больше не будет выходить за пределы этой точки.

Автор: ppostma1 Размещён: 25.03.2015 09:28

16 плюса

321 Репутация автора

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

Автор: Marcus Mori Morba Размещён: 24.04.2015 10:17

12 плюса

2860 Репутация автора

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

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

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

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

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

Автор: Dennis Best Размещён: 20.03.2016 11:46

10 плюса

147 Репутация автора

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

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

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}
Автор: Thomas Mathew Размещён: 09.05.2018 06:34
Вопросы из категории :
32x32