положение фонового изображения 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 ответов:
проблема не с вашим 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.
принятый ответ делает трюк, но вот еще одно решение.
включение размеров в SVG, чтобы они были идентичны размерам viewbox, делает трюк.
width="496px" height="146px" viewBox="0 0 496 146"
Если вы похожи на меня, и вы редактируете/сохраняете свои SVG в Illustrator, снимите флажок "отзывчивый" в Дополнительных параметрах в диалоговом окне сохранения. Тогда размеры будут включены.
(поскольку он масштабируется, он "отзывчив" по определению. Так что этот параметр кажется немного избыточный.)
Если мы дадим размер фона, он будет работать в IE
ниже приведен пример кода
.menu ul li a.explore { background: url(../images/explore.svg) no-repeat left center; background-size: 18px 18px; }
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, но оно больше не будет всплывать за пределы этой точки.
решение: попробовать другой .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">