SVG在IE中无法正确缩放-具有额外的空间

大佬教程收集整理的这篇文章主要介绍了SVG在IE中无法正确缩放-具有额外的空间，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决SVG在IE中无法正确缩放-具有额外的空间？

正如您所发现的那样，如果您不同时提供宽度和高度，则IE有一个错误，即无法正确缩放SVG。

要使其在IE中运行，您可以使用Nicolas gallagher发现的技巧（？）。

技巧使用一个<canvas>元素。IE 可以 正确缩放画布元素。因此，如果您将<div>SVG与SVG 放在一起，那么SVG的尺寸将正确无误。您只需要给画布提供与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>

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

无论您要使其与宽度还是高度匹配，该技巧都有效。

解决方法

<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,0.3,0.6,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,2-0.5,1.1c0.6,1.5-0.2,2.7,3.5c0.8,0.8,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,3.6,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,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.7h-2l5,11.6c0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.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,2,6.6,9.9
        s0.9,4.2,4.2c1.9,0L183,23.7z M74.2,63.8c6.8,12.3,5.5,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,63.8z M196.6,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.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>

大佬总结

以上是大佬教程为你收集整理的SVG在IE中无法正确缩放-具有额外的空间全部内容，希望文章能够帮你解决SVG在IE中无法正确缩放-具有额外的空间所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。