web-dev-qa-db-fra.com

svg la position de l'image d'arrière-plan est toujours centrée dans Internet Explorer, malgré la position de l'arrière-plan: centre gauche;

J'utilise un logo SVG comme image d'arrière-plan et je ne parviens pas à l'aligner correctement à gauche dans Internet Explorer (edit: and Safari) .

Les conteneurs ressemblent à ceci:

<div id="header">
    <div id="logo"></div>
</div>

Avec les styles:

#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;}

Vous pouvez voir que le <div> devrait couvrir 100% de son parent mais afficher le logo à gauche de l'élément. Cela fonctionne très bien dans Chrome et Safari, mais le logo est toujours centré à l'intérieur du <div id="logo"> dans IE.

L'information semble être vraiment difficile à trouver à ce sujet, quelqu'un d'autre a-t-il eu le même problème?

Voici un lien vers un exemple de version du problème , la boîte verte est le SVG.

htmlcsssvg
68
bluefantail

Le problème ne vient pas de votre CSS, mais de votre SVG. Le SVG se développera pour remplir l’arrière-plan de la boîte à éléments entière (comme prévu). Comment votre échelle SVG devient alors le facteur déterminant:

Définir un viewBox="0 0 width height" (en pixels) attribut sur votre <svg> élément et retirez ses attributs width et height. Vous devez également définir preserveAspectRatio="xMinYMid" (x/aligné verticalement à gauche, y/horizontalement aligné au milieu) sur l’élément svg. Cela fonctionne avec Internet Explorer 10 et 11, au moins.

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

En savoir plus sur les attributs preserveAspectRatio et viewBox . Source, “Premiers pas avec SVG” dans IEblog .

147
Aeyoun

Dans mon cas, l'ajout des valeurs "width" et "height" a résolu le problème de ie9-11.

17
Marcus Mori Morba

La réponse acceptée fonctionne, mais voici une autre solution.

L'inclusion des dimensions dans le SVG pour qu'elles soient identiques aux dimensions de la zone de visualisation fait également l'affaire.

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

Si vous êtes comme moi et que vous modifiez/enregistrez vos fichiers SVG dans Illustrator, décochez la case "responsive" dans les options avancées de la boîte de dialogue Enregistrer. Ensuite, les dimensions seront incluses.

(Comme il est évolutif, il est "réactif" par définition. Ce paramètre semble donc un peu redondant.)

12
Dennis Best

Si nous donnons la taille de l'arrière-plan, cela fonctionnera dans IE

ci-dessous est l'exemple de code

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

IE 8-11, lorsque vous placez un fichier SVG dans un fond non répété, corrige même automatiquement les côtés gauche et droit afin de le redimensionner. Cela crée un effet de centrage de l'image, au niveau de l'image. Signification: Il étend les blancs des deux côtés de l'image pour remplir le conteneur.

La nouvelle image correspond alors à 100% de la largeur de son élément. C'est pourquoi position: left n'a pas d'effet, il est déjà laissé avec un rembourrage inclus.

Le conteneur de l'élément d'arrière-plan doit être contraint pour éviter une expansion excessive (via le calage). Par exemple: max-width

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

L'image sera toujours centrée dans les 140px, mais elle ne flottera plus au-delà de ce point.

5
ppostma1