IE9中的SVG Scaling问题

时间:2013-12-12 18:33:13

标签: html css svg internet-explorer-9 image-resizing

在IE9中使用小svg时遇到问题。它在右侧切断/不在中心位置:

screenshot(假设是“X”)

我的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>

我删除了 width height ,并且 viewbox preserveAspectRatio =“xMinYMin none”虽然...

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

2 个答案:

答案 0 :(得分:2)

您的preserveAspectRatio值无效,浏览器应忽略该值:

preserveAspectRatio="xMinYMin none"

在这种情况下渲染时将使用默认值xMidYMid meet

有关语法详细信息,请参阅SVG 1.1 spec。 IE可能会将值视为部分有效,仅应用xMinYMin部分,这将导致左对齐图像。使用正确的语法应该可以解决问题。

答案 1 :(得分:0)

在Safari中为我设置的正确设置可避免比例缩放:

<svg ... preserveAspectRatio="none">

</svg>