web-dev-qa-db-fra.com

Les SVG ne s’échelonnent pas correctement dans IE - a de l'espace supplémentaire

J'ai décidé de passer aux symboles svg pour l'un de mes projets - mais j'ai besoin qu'ils soient responsive . L'idée principale étant de ne pas avoir plusieurs requêtes http, je pensais donc fusionner tous les SVG dans un seul SVG, définir des symboles et les utiliser comme suit:

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
    <use xlink:href="#mys"></use>
  <svg>
</div>

Voici un jsfiddle, vérifiez le comportement différent dans IE (j'ai vérifié 11, mais j'ai lu que le numéro 9 présente également plusieurs problèmes): http://jsfiddle.net/ws472q71/

Pour ma vie, je ne peux pas faire en sorte que cela fonctionne correctement. Le code ci-dessus fonctionne correctement dans Firefox et Chrome, mais échoue dans IE. J'ai lu des articles sur IE, mais je n'ai rien trouvé qui fonctionne.

Qu'est-ce que je fais mal?

Existe-t-il une autre solution similaire permettant de fusionner des fichiers SVG dans un fichier et de les utiliser en tant qu’images réactives?

Merci!

htmlcsssvg
17
scooterlord

Comme vous l'avez découvert, IE a un bogue dans lequel il ne redimensionne pas correctement le fichier SVG si vous ne fournissez pas à la fois la largeur et la hauteur.

Pour que cela fonctionne dans IE, vous pouvez utiliser une astuce découverte (?) Par Nicolas Gallagher.

http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-Explorer/

L'astuce utilise un élément <canvas>. IE fait met correctement à l'échelle les éléments de la toile. Donc, si vous en placez un dans le <div> avec le SVG, celui-ci aura la taille correcte. Vous avez juste besoin de donner à la toile le même rapport de format que votre SVG.

<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

avec CSS

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

Le truc fonctionne si vous essayez de le faire correspondre à une largeur ou une hauteur.

33
Paul LeBeau

Sur une note pour aider ceux qui ont du mal à implémenter ce correctif ou à trouver qu'il ne fonctionne pas avec des fichiers svg externes plutôt qu'avec un balisage svg dans la page

Vous devez vous assurer que lors de l'édition de votre fichier svg dans un éditeur de texte, les options viewBox ou preserveAspectRatio ne manquent pas dans la balise d'ouverture. Si ceux-ci sont manquants quels que soient les correctifs que vous appliquez, le svg ne sera toujours pas mis à l'échelle dans IE - même s'il sera mis à niveau dans les autres navigateurs sans problème.

Si ces options sont définies, vous pouvez définir la largeur/hauteur sur l'élément d'image utilisé pour extraire le svg à 100% et utiliser max-width ou max-height pour limiter la mise à l'échelle. Bien que - vous pouvez toujours avoir quelques problèmes d'alignement.

3
IDED

La solution de Nicolas Gallagher fonctionne à merveille, cependant, je me suis heurté à des problèmes de réactivité lorsque j'ai diminué la fenêtre d'affichage. Je pensais transmettre le correctif que j'avais utilisé:

 <div class="parent-div">
    <canvas width="3" height="1"></canvas>
    <svg class="mys" viewBox="0 0 254 108">
         <use xlink:href="#mys"></use>
    </svg>
 </div>

J'ai mis à jour le "parent-div" avec max-width: 100%;

.parent-div{
     position: relative;
     display: inline-block;
     height: 550px;
     max-width: 100%;
}

Cela ne résoudra pas tous vos problèmes de mise à l'échelle. Vous devrez toujours utiliser des requêtes de média pour changer la hauteur au fur et à mesure, mais au moins le svg ne vide pas son conteneur. J'espère que ça aide quelqu'un.

1
DH-Designs