IE9中的SVG缩放问题 [英] SVG Scaling Issue in IE9

问题描述

在IE9中使用小型svg时遇到问题。它在右边被切断/不在中心：

Having issues using small svg in IE9. It get's chopped off on the right/is not centered:

（假设为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 和

jsfiddle.net/dzCL2/12/rel =nofollow noreferrer> http://jsfiddle.net/dzCL2/12/

推荐答案

您的preserveAspectRatio值无效，应该被浏览器忽略：

Your preserveAspectRatio value is invalid, and should be ignored by the browser:

preserveAspectRatio="xMinYMin none"

xMidYMid meet 的默认值将

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

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.

这篇关于IE9中的SVG缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！