SVG在IE中不能正确缩放 - 有额外的空间 [英] SVGs not scaling properly in IE - has extra space
问题描述
我决定切换到我的一个项目的svg符号 - 但需要它们响应。主要思想是不要有多个http请求，所以我想把所有的SVG合并成一个SVG，定义符号并按如下方式使用它们：
< svg style =display：none;>
< defs>
< symbol id =mys>
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h- 6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.210 ，21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3 -3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8 ，0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2 .110-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0.3.6,1.4,4.1,3.2l15.3,4.110。 4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1 ，3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1 .3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7， 2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183 ，23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8 ，74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8 Z/>
< / symbol>
< / defs>
< / svg>
< div style =position：relative; width：100％; background：blue;>
< svg class =mysviewBox =0 0 254 108preserveAspectRatio =xMaxYMax meetstyle =width：100％;>
< use xlink：href =＃mys>< / use>
< svg>
< / div>
这里是一个jsfiddle，检查IE中的不同行为（我选中了11，但是读了9问题以及）：
http://jsfiddle.net/ws472q71/
在我的生活中，我无法得到这个正常工作。上述代码在Firefox和Chrome中正常工作，但在IE中失败。我阅读了关于IE的问题，但我找不到任何可行的东西。
我在做什么错误？
是否有其他类似的解决方案可以将SVG合并到一个文件中使用它们作为响应图像？
谢谢！
发现，如果你不提供宽度和高度，IE会有一个错误，它不能正确地缩放SVG。为了让它在IE中工作，你可以使用Nicolas Gallagher发现的一个技巧（？）。
http://nicolas.gallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
使用< canvas> 元素。 IE 不会正确缩放画布元素。因此，如果您将一个放置在带SVG的< div> 中，则SVG将以正确的大小结束。您只需要为画布提供与SVG相同的纵横比。
< div style =position：relative; width ：100％;背景：蓝色;>
< canvas width =254height =108>< / canvas>
< svg class =mysviewBox =0 0 254 108preserveAspectRatio =xMaxYMax meet>
< use xlink：href =＃mys>< / use>
< / svg>
< / div>
与CSS
canvas {
display：block;
宽度：100％;
可见性：隐藏;
}
svg {
position：absolute;
top：0;
剩下：0;
宽度：100％;
}
canvas {display：block ;宽度：100％; visibility：hidden;} svg {position：absolute; top：0;左：0; width：100％;}
< svg style = display：none;>< defs>< symbol id =mys> < path fill-rule =evenoddclip-rule =evenoddfill =＃3F77BCd =M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3 c0-8.5 -6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v，5.2H89.4c0-0.3,0-0.6 ，0-0.9 C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22。 8L74.3,44.9l-13.5-3.6l0.5-1.7l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0 .1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5 c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0- 3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1 c0-2.5-0.5-2.4-2.1- 3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8c0-2.3,1.9-4.2 ，4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6 ，2.1-2.6 s32.5-0.5,35.1,0.5c2.7,1.3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6， 7.6,13.6,7.6l-1,17.6l1.3,2V77.7z M81.5,46.8l8.6,8.6h9.3l2.9-2.9L8 1.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9 s0.9,4.2 ，2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0 -12.3-5.5-12.3-12.3 S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5 -12.3-12.3S189.8,63.8,196.6,63.8z/>< / symbol>< / defs>< / svg>< div style =position：relative; width：100％; background：蓝色;> < canvas width =254height =108>< / canvas> < svg class =mysviewBox =0 0 254 108preserveAspectRatio =xMaxYMax meet> <使用xlink：href =＃mys>< / use> < / svg>< / div>
无论你是试图让它匹配宽度还是高度。
I decided to switch to svg symbols for one of my projects - but need them to be responsive. The main idea is not to have multiple http requests, so I was thinking of merging all SVGs into one SVG, define symbols and use them as follows:
<svg style="display:none;">
<defs>
<symbol id="mys">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
<use xlink:href="#mys"></use>
<svg>
</div>
Here is a jsfiddle, check the different behaviour in IE (I checked 11 but read that 9 has multiple issues as well): http://jsfiddle.net/ws472q71/
For the life of me I can't get this to work properly. The above code works correctly in Firefox and Chrome, but fails in IE. I read about IE issues, but I couldn't find anything that works.
What am I doing wrong?
Is there any other similar solution that can merge SVGs into one file and use them as responsive images?
Thanks!
As you have discovered, IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.
To get it working in IE, you can use a trick discovered (?) by Nicolas Gallagher.
http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/
The trick uses a <canvas> element. IE does properly scale canvas elements. So if you place one in the <div> with the SVG, the SVG will end up the correct size. You just need to give the canvas the same aspect ratio as your SVG.
<div style="position:relative;width:100%;background:blue;">
<canvas width="254" height="108"></canvas>
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#mys"></use>
</svg>
</div>
with CSS
canvas {
display: block;
width: 100%;
visibility: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
canvas {
display: block;
width: 100%;
visibility: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<svg style="display:none;">
<defs>
<symbol id="mys">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
<canvas width="254" height="108"></canvas>
<svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
<use xlink:href="#mys"></use>
</svg>
</div>
The trick works whether you are trying to get it to match a width or a height.
这篇关于SVG在IE中不能正确缩放 - 有额外的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
