Geek asks and answers

Error scaling SVG in IE9

Problems using small svg in IE9. It is chopped off on the right / not centered:

screenshot (This is assumed to be an "X")

My SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 364.786 364.786" enable-background="new 0 0 364.786 364.786"
     xml:space="preserve" preserveAspectRatio="xMinYMin none">
<polygon fill="#999999" points="300.988,0 182.388,118.618 63.768,0.015 0,63.745 118.639,182.376 0.015,301.018 63.745,364.786 
    182.395,246.127 301.045,364.771 364.786,300.988 246.15,182.371 364.771,63.742 "/>
</svg>

I removed the width and height and had a viewbox and preserveAspectRatio = "xMinYMin none" though ...

http://jsfiddle.net/dzCL2/12/

+1
source share
2 answers

Your preserveAspectRatio value is not valid and should be ignored by the browser:

preserveAspectRatio="xMinYMin none"

The default value xMidYMid meetwill be used when rendering in this case.

. SVG 1.1. , IE , xMinYMin, . , , .

+2

, Safari, :

<svg ... preserveAspectRatio="none">

</svg>
0

More articles:


All Articles