SVG 图形在 IE10 和 11 中无法缩放答案

【问题标题】：SVG graphic doesn't scale in IE10 and 11SVG 图形在 IE10 和 11 中无法缩放
【发布时间】：2016-04-13 01:44:08
【问题描述】：

我在 IE10 和 11 上的网站上遇到 SVG 图形问题。

它在 Google-chrome 和 Firefox 中运行良好，但在 Internet Explorer 中却不行。图形很小，无法在 IE 上缩放。

SVG 对象写成：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 570 910" style="enable-background:new 0 0 570 910;" xml:space="preserve" class="style-svg rule-svg6 alignnone size-full wp-image-9121 replaced-svg">

这是在 CMS Wordpress 中添加的方式

<img src="http://example.net/mps/noaccess/wp-content/uploads/2016/01/Prevalence-A.svg" alt="Prevalence-A" class="style-svg rule-svg2 alignnone size-full wp-image-9041" />

然后安装了一个渲染 SVG 的插件： _https://wordpress.org/plugins/svg-support/

此图形的每一行都由它自己的矩形组成。所以，我的图形看起来：

<g>
            <rect x="220.2" y="196.2" class="rop110" width="736" height="28"></rect>
            <rect x="220.2" y="106.2" class="rop110" width="699" height="28"></rect>
            <rect x="220.2" y="256.2" class="rop110" width="829" height="28"></rect>
            <rect x="220.2" y="76.2" class="rop110" width="642" height="28"></rect>
            <rect x="220.2" y="226.2" class="rop110" width="456" height="28"></rect>
            <rect x="220.2" y="46.2" class="rop110" width="365" height="28"></rect>
            <rect x="220.2" y="166.2" class="rop110" width="596" height="28"></rect>
            <rect x="220.2" y="136.2" class="rop110" width="141" height="28"></rect>
        </g>

这是我在 Google-chrome 和 Firefox 中使用的，没关系。

这就是我在 Internet Explorer 上的：（很小）

我有一个带有这段代码的 svg.image.css：

svg.style-svg {display: inline-block;

position: relative;

width: 100%;

padding-bottom: 100%; 

vertical-align: middle; 

overflow: hidden; }

当我更改宽度时，它适用于 Google-chrome 和 Firefox，但不适用于 Internet Explorer。它仍然很小..

我尝试使用width: auto; 或width: 100px; 但它不起作用..

【问题讨论】：

@charl-steynberg 感谢兄弟的回答！很有用。但我没有提供全面的信息。请参阅我在帖子中添加的其他信息

标签： svg internet-explorer-9 internet-explorer-11

【解决方案1】：

您可以通过像这样定义 SVG 对象来使其按比例缩放：

<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="100%"
    height="100%"
    viewBox="0 0 570 910"
    style="display:block">

    <rect x="49.6" y="41.6" class="rop20" width="1119.4" height="302"></rect>

</svg>

但请注意您的 SVG 内容，请参阅 width=1119.4 部分，它比 SVG“viewBox”大小要大很多。

尝试使用 SVG 图形编辑器，例如“Inkscape”——它是免费的，可在 Linux、Windows 和 MacOSX 上运行，您可以在此处找到：https://inkscape.org/en/download/

创建 SVG 并将其保存为“普通 SVG”后，您可以在自己喜欢的文本编辑器中打开和编辑 SVG 代码，使其根据容器元素的宽度和高度进行缩放，如上所示。

如果您想在 HTML 中内嵌使用它，只需删除您的 SVG 图形创作软件（如 Inkscape）创建的“XML”声明以实现兼容性。

【讨论】：