2016-04-29 13 views
1

keine Ahnung, warum das passiert?IE zentriert meine Svg

Wenn Sie Folgendes in ein neues codepen.io in chrome einfügen, wird ein Häkchen angezeigt, das sich in der oberen linken Ecke befindet.

sehen sie jedoch in IE und seinem Recht in der Mitte der Seite

http://codepen.io/anon/pen/RaeYjd

<svg version="1.1" class="pull-left svg-header-tick" xmlns="http://www.w3.org/2000/svg" height="22px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 72" enable-background="new 0 0 92 72" xml:space="preserve"><g><path class="svgcolor" d="M28.1,71.8L1.9,45.6c-2.3-2.3-2.3-6.1,0-8.5c2.3-2.3,6.1-2.3,8.5,0l17.8,17.8L81,2c2.3-2.3,6.1-2.3,8.5,0 
    c2.3,2.3,2.3,6.1,0,8.5L28.1,71.8z"></path></g> 
           </svg> 

Antwort

2

In meinen schnellen Tests scheint es, dass nur durch height IE-Einstellung (nicht an der Kante - es sieht dort fein) dehnt das gesamte svg Element horizontal aus. Wenn Sie ein width-Attribut hinzufügen, wird es in die obere linke Ecke zurückgesetzt. Es funktioniert auch, wenn Sie Höhe und Breite in CSS festlegen.

From CSS Tricks:

Viele Browser-IE, Safari und Versionen von Opera und Chrome veröffentlicht vor dem Sommer 2014-wird nicht auto-Größe Inline-SVG. Wenn Sie nicht sowohl die Höhe als auch die Breite angeben, wenden diese Browser ihre üblichen Standardgrößen an, die, wie bereits erwähnt, für verschiedene Browser unterschiedlich sind. Das Bild wird so skaliert, dass es in diese Höhe oder Breite passt, sodass zusätzliche Leerräume um das Bild entstehen. Auch hier gibt es wieder Inkonsistenzen, wenn Sie sowohl Höhe als auch Breite automatisch belassen.

+0

danke! perfekt –