SVG questions dans ie11
J'ai un div qui a de la hauteur définie à 320 pixels, alors qu'il est enfant est fixée à 100% de la largeur de que.
L'enfant est un fichier SVG qui-je définir la largeur à 200% du récipient.
Dans chrome et firefox qui fonctionne très bien, je reçois une belle image comme ceci:
Le code 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 Bord. Mais dans IE11 j'obtiens ceci:
Et si je inspecter l'élément, je peux voir que le SVG dirait qu'il a un rembourrage de gauche et de droite, mais je peux vous assurer qu'il ne l'est pas.
Personne ne sait pourquoi ce qui se passe et comment je peux résoudre ce problème?
Mise à jour de 1
J'ai créé une version très basique sur codepen de sorte que vous pouvez voir le problème.
Ici, il est:
http://codepen.io/r3plica/pen/Kdypwe
Vue que dans google chrome, firefox, Edge et puis IE11. Vous verrez que seuls les IE11 a la question.
- Pourquoi votre SVG ensemble à une largeur de 200%?
- parce qu'il a un avant et un en arrière et je ne veux voir l'avant
- Nous avons besoin de voir comment vous avez votre image inclus dans votre balise SVG. Afin que nous puissions voir votre code dans le contexte. Aussi un exemple de code serait encore mieux si nous pouvons tester votre code en direct modifiable environnement comme codepen ou jsfiddle. Nous avons besoin de plus de contexte sur votre image afin que nous puissions vous aider!
- Je vais avoir un aller à faire cela, pourrait me prendre un tout foirer le truc qui n'est pas nécessaire.
- J'ai ajouté un codepen pour illustrer mon problème.
- des idées?
- Viens de faire ma Réponse, vérifiez ci-dessous
Vous devez vous connecter pour publier un commentaire.
Ce que vous pouvez faire est d'ajouter le
height="320"
attribut à votre balise SVG. Donc, c'est à dire peut être rendu correctement. Je crois IE11 est levée par l'utilisation de largeur de 200% dans votre CSS. Mais depuisxml:space="preserve"
est la valeur par défaut, paramètre uniquement la hauteur de garder les proportions de votre SVG veste.Test codepen exemple dans IE11:
http://codepen.io/jonathan/pen/MarvEm
Également supprimer l'espace de nom XML tag car il n'est pas nécessaire à l'intérieur d'une page HTML. Et vous pouvez également supprimer certains des SVG attributs comme
version
,xmlns
,xmlns:xlink
,x
, ety
, puisque celles-ci ne sont pas nécessaires.150px
est la valeur par défaut pour<svg>
éléments dans IE11 siheight
n'est pas définie.. Si vous avez besoin de définir une hauteur spécifique dans votre CSS, ou en ligne viaheight
attributJ'ai été d'avoir une image SVG problème d'affichage dans IE11. La question était intérieure svg image ayant la largeur et la hauteur mentionné. Pour cette raison, il n'était pas à l'échelle correctement sur IE11 et ça marchait très bien sur IE bord, chrome, firefox très fine.
Pour résoudre le problème j'ai supprimé width="120" height="120" et sa fonctionne très bien.
Lorsque j'ai observé image svg a été d'avoir width="120" height="120" viewBox="0 0 120 120" mais dans IE11 c'est seulement en montrant width="120" height="120".
de sortie a été: