положение фонового изображения svg всегда центрируется в internet explorer, Несмотря на фоновое положение: левый центр;

Я использую логотип 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"> in ТО ЕСТЬ.

информация, кажется, действительно трудно найти на этом, у кого-нибудь еще была такая же проблема?

вот ссылка версии проблема, зеленая коробка-это SVG.

7 61
html css svg

7 ответов:

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

136

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

13

принятый ответ делает трюк, но вот еще одно решение.

включение размеров в SVG, чтобы они были идентичны размерам viewbox, делает трюк. 

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

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

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

9

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

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

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

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

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

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

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

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

5

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

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

display: inline-block;

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

-3