可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
The following SVG renders well in Firefox and Chrome, on both Windows and Linux. In IE11, however, the overall size of the rendered drawing is tiny - roughly 170 pixels wide - and does not respond at all to changes in browser window size, as it does (and should) in other browsers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<svg width="65%" viewBox="0 0 700 620" style="margin-left:auto; margin-right:auto;display:block;">
<svg width="700" height="20" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(128,128,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
<svg width="700" height="600" y="20" viewBox="0 0 700 600" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(255,200,255);stroke-width:1px;stroke:rgb(0,0,0);" />
<rect width="100" height="100" x="0" y="0" style="fill:rgb(255,255,200);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</svg>
</body>
</html>
(Sorry about the inline styles; just experimenting, and it was quicker that way)
I'm somewhat new to SVG, and I'm not seeing anything particularly wrong here. Is this just another IE-specific failure, or have I missed something?
Note: added jsfiddle link
回答1:
So, it turns out this is yet another in the seemingly endless parade of Internet Explorer failures to comply with simple, widespread standards. I can boil this down to a dirt-simple example:
<!DOCTYPE html>
<body>
<svg width="65%" viewBox="0 0 700 600">
<rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</body>
In any real browser, this will correctly draw a pink rectangle whose width is 65% of the browser window width, with an aspect ratio of 700w x 600h; changing the window size will change the rectangle size.
In Internet Explorer, this simply fails, and draws a tiny rectangle - albeit with the proper aspect ratio - that is about 170 pixels wide. Who knows where it is coming up with this size? Wherever it comes from, it is fixed, and unaffected by browser resizing. This is a failure regarding the SVG docs, which Firefox, Chrome, and probably every other browser on the planet manages to honor.
The workaround, as usual, is going to be to define a degraded, fixed-size SVG tag when IE is encountered, something like
<svg width="700mm" height="600mm"...>
and lose the much-desired resizing capability. And, I suppose, as long as I'm bothering with discerning which browser is in play - something I should never have to do in 2014 - I can also drop a nasty note on the page telling users to steer clear of Microsoft and get a real browser.
回答2:
Instead of setting a % width on the SVG element itself, wrap your SVG within two nested div tags with css classes "svg-flex" and "svg-flex-inner" respectively. Set the width of the outer element with the percentage you want for your graphic instead of setting it on the SVG element directly. Make sure you give your SVG element a width of 100%.
<div class="svg-flex" style="width: 50%;">
<div class="svg-flex-inner" style="width: 50%; position: relative; padding-top: 100%;">
<svg style="width: 100%; height: 100%; position: absolute; margin-top: -100%;">
<!-- Whatever you want here -->
</svg>
</div>
</div>
Instead of inline css you could just add these styles to your page
.svg-flex-inner {
position: relative;
padding-top: 100%;
}
.svg-flex svg {
position: absolute;
margin-top: -100%;
width: 100%;
height: 100%;
}
Now you can control the width of your SVG by modifying the width on the outer "svg-flex" element.
If you have an element that is not a perfect square then you will need to tweak the the padding-top and margin-top values using the following formula:
(100 * height / width) %.
so, for a 16:9 graphic, the ratio would be 100 * 9 / 16 = 56.25%
padding-top: 56.25%;
...
margin-top: -56.25%
Here's the fiddle
回答3:
this percentage svg does works on IE 11
If you do test it on http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
<!DOCTYPE html>
<HTML style="width:100%; height: 100%">
<body style="width:100%; height: 100%">
<svg width="65%" viewBox="0 0 700 600" height ="100%">
<rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</body>
</HTML>
I should test it also on older versions, the most curious change is setting the <html> and the <body> to "width:100%; height: 100%"
回答4:
You can also put an external svg in an object tag and it will be resized correctly.
回答5:
It appears from my experience that IE11 will not scale inline SVG graphics if increasing the width to fill the containing element will also increase the height of the containing element, even if the containing element is not fixed height.
In my current use case (heavily using flexbox) i solved it by setting
align-items: stretch;
instead of
align-items: center;
on my containing element.
My markup looked like so:
<section class="container">
<div class="cell">{LOTS OF TEXT</div>
<figure class="cell">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
...
</svg>
<figure>
</section>
And my CSS (actually Less) looked like this:
.container {
width: 70%;
max-width: 1600px;
display: flex;
align-items: stretch;
> figure {
margin: 0 20px 0 0;
> svg {
width: 100%;
}
}
> .cell {
display: flex;
justify-content: center;
flex-direction: column;
flex: 1 0 0px;
}
}
Of course, depending on your implementation you will probably need another solution to grow your containing element.
How IE decides what the "fixed" height of the containing element is, i do not know.
回答6:
Use HTML5 and place svg in a DIV as shown below. OK for all browers
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<div style="width:700px;height:620px">
<svg width="65%" viewBox="0 0 700 620" style="margin-left:auto; margin-right:auto;display:block;">
<svg width="700" height="20" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(128,128,255);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
<svg width="700" height="600" y="20" viewBox="0 0 700 600" style="margin-left:auto; margin-right:auto;display:block;">
<rect width="100%" height="100%" style="fill:rgb(255,200,255);stroke-width:1px;stroke:rgb(0,0,0);" />
<rect width="100" height="100" x="0" y="0" style="fill:rgb(255,255,200);stroke-width:1px;stroke:rgb(0,0,0);" />
</svg>
</svg>
</div>
</body>
</html>
回答7:
In theory the content of an SVG should not be aware of what is outside of it. This means especially that it should not have to know about the width(s) of its parent element(s). SVG is intended as a drawing canvas where you should specify all the positions and dimensions as pixels.
I found this article helpful
