问题
Having issues using small svg in IE9. It get's chopped off on the right/is not centered:
(Supposed to be a "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 width and height and have viewbox and preserveAspectRatio="xMinYMin none" though...
http://jsfiddle.net/dzCL2/12/
回答1:
Your preserveAspectRatio value is invalid, and should be ignored by the browser:
preserveAspectRatio="xMinYMin none"
The default value of xMidYMid meet will be used when rendering in this case.
Refer to the SVG 1.1 spec for the syntax details. It's possible that IE treats the value as partially valid, applying the xMinYMin part only, that would cause a left-aligned image. Using correct syntax should hopefully fix the problem.
回答2:
The correct setting which worked for me in Safari to avoiding proportional scaling:
<svg ... preserveAspectRatio="none">
</svg>
来源：https://stackoverflow.com/questions/20551439/svg-scaling-issue-in-ie9