SVG scaling in Internet Explorer

问题

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

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

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.

Here is the code I have:

HTML

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

Results

Internet Explorer 11

Firefox and Chrome

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.

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?

回答1:

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.

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.

You should probably try:

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

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

来源：https://stackoverflow.com/questions/24544295/svg-scaling-in-internet-explorer

标签

css

internet-explorer

svg

scale