SVG图形在IE10和11中不能缩放

Question

我在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; 但它不起作用..

Answer 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和Linux上运行。 MacOSX，您可以在此处找到：https://inkscape.org/en/download/

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

如果您想使用内联 - 嵌入HTML，只需删除SVG图形创作软件创建的“XML”声明（如Inkscape）以获得兼容性。