Internet Explorer中的SVG缩放 [英] SVG scaling in Internet Explorer

问题描述

我已经尝试了以下问题的解决方案，但似乎都不起作用:

I've tried the solutions in the following questions but none of them seem to work:

• 缩放/调整HTML中的SVG
• 如何正确，快速地缩放SVG在HTML5中?
• 关于使用SVG的最佳做法高度和宽度?

• Scaling/Resizing SVG in an HTML
• How to scale SVG properly and responsively in HTML5?
• Best practice for using SVGs, regarding height and width?

在最后一个问题中，高度和宽度都在CSS中指定，但是我只想指定一个尺寸.例如，目前我的CSS中有一个max-height，用于控制图像的高度.

In the last question, the height and width are both specified in the CSS, however I only want to specify one of the dimensions. For instance, currently I have a max-height in my CSS that controls the height of the image.

这是我的代码:

<a href='#schedule'>
    <img src='images/calendar.svg' alt='' role='presentation' class='nav-item-icon'>
    <span class='nav-item-text'>Schedule</span>
</a>

CSS

.navigation-main a {
    padding: 0.5rem 0;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}
.nav-item-icon {
    max-height: 1.5em;
    vertical-align: middle;
}
.nav-item-text {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.5em;
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="82.7272727273px" height="100px" viewBox="0 0 91.59 110.063"
    enable-background="new 0 0 91.59 110.063" xml:space="preserve">
    <!-- codes -->
</svg>

结果

Internet Explorer 11

Results

Internet Explorer 11

我尝试删除SVG的height和width属性，但是除非我在CSS中指定宽度，否则这将使SVG在所有浏览器中的父元素的宽度为100％.内联SVG并没有什么不同.

I have tried removing the height and width attributes of the SVG but this makes the SVG 100% width of the parent element in all browsers unless I specify a width in CSS. Inlining the SVG does not make a difference.

在JavaScript中可能有一种方法可以通过获取计算出的高度并手动设置宽度来做到这一点，但我不希望诉诸于此类技巧.有没有一种方法可以使图像在Internet Explorer中正确缩放?

There's probably a way to do this in JavaScript by getting the computed height and setting the width manually but I would prefer not to resort to such hacks. Is there a way to get the image to scale properly in Internet Explorer?

推荐答案

在Internet Explorer中，您需要定义viewBox以便可以很好地缩放.
您已经定义了一个viewBox，其宽度和高度与width和height属性不同.
这样对吗 ?我的猜测不是.

In Internet-Explorer, you need to define viewBox so it scales well.
You have defined a viewBox, with a different width and height than your width and height attributes.
Is this correct ? My guess is not.

然后，您还用逗号值定义了像素.
这是无稽之谈.
像素是离散单位.
没有半像素或四分之一像素.
IE可能没有正确清理或解释这些值.

Then you have also defined pixels with a comma value.
This is nonsense.
A pixel is a discrete unit.
There is no half-pixel or quarter-pixel.
IE probably doesn't properly sanitize or interprete those values.

您应该尝试:

width="82px" height="100px" viewBox="0 0 82 100"

也摆脱xml:space="preserve".
IE不支持.

Also get rid of xml:space="preserve".
IE doesn't support it.

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