web-dev-qa-db-fra.com

Problèmes SVG dans ie11

J'ai un div dont la hauteur est réglée à 320 pixels, puis son enfant est défini à 100% de la largeur de cette . L'enfant de ce fichier est un fichier SVG dont la largeur est définie à 200% du conteneur .En chrome et firefox qui fonctionnent bien, je reçois une belle image comme celle-ci:

 enter image description here

Le HTML ressemble à ceci:

<div class="kit-template ng-isolate-scope front">
    <div class="svg-document ng-scope">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
            <!-- Removed for brevity -->
        </svg>
    </div>
</div>

et le CSS/SASS ressemble à ceci: 

.kit-template {
    overflow: hidden;
    position: relative;   
    height: 320px;

    .svg-document {  
        width: 100%;   
        overflow: hidden;
        margin: 0 auto;
        /*position: absolute;
        bottom: 0;*/

        svg {
            width: 200%;

            path, polyline, polygon, rect {
                cursor: pointer;
            }
        }
    }
}

Comme je l'ai dit, cela fonctionne très bien dans Chrome, Firefox et IE Edge. Mais dans IE11, je reçois ceci:

 enter image description here

Et si j'inspecte l'élément, je peux voir que le SVG a l'air d'être rembourré à gauche et à droite, mais je peux vous assurer que ce n'est pas le cas.

Est-ce que quelqu'un sait pourquoi cela se produit et comment je peux le réparer?

Mise à jour 1

J'ai créé une version très simple sur codepen pour que vous puissiez voir le problème . Le voici:

http://codepen.io/r3plica/pen/Kdypwe

Voir que dans chrome, Firefox, Edge, puis IE11. Vous verrez que seul IE11 a le problème.

htmlcsssvginternet-explorer-11
14
r3plica

Ce que vous pouvez faire est d’ajouter l’attribut height="320" à votre tag SVG. Donc, IE peut rendre correctement. Je crois que IE11 est désemparé en utilisant une largeur de 200% dans votre CSS. Mais puisque xml:space="preserve" est la valeur par défaut, définir uniquement la hauteur conservera les proportions de votre jaquette SVG.

Testez l'exemple de codepen dans IE11:

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

Supprimez également la balise XML namespace car elle n'est pas nécessaire dans une page HTML. Et vous pouvez également supprimer certains attributs SVG tels que version, xmlns, xmlns:xlink, x et y, car ils ne sont pas nécessaires non plus.

8
Jonathan Marzullo

J'avais un problème d'affichage d'image SVG dans IE11. Le problème était dans l'image svg intérieure avait la largeur et la hauteur mentionnées. Pour cette raison, il ne parvenait pas à évoluer correctement sur IE11 et il fonctionnait correctement sous IE Edge, Chrome, Firefox très bien.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

Pour résoudre le problème, j'ai supprimé width = "120" height = "120" et son fonctionnement correct . Lorsque j'ai observé l'image svg, elle avait width = "120" height = "120" viewBox = "0 0 120 120 " mais dans IE11, il ne montrait que width =" 120 "height =" 120 ".

la sortie était:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">

 enter image description here

0
Sandeep M