为什么Internet Explorer无法正确显示我的.svg图像？

Question

我的html文件中有一个图像：

<img src="../path-to-image/image.svg" class="image-class" /> 

和一些简单的CSS：

.image-class{
      height: 80px;
      width: 80px;
  }

但是，不是将其显示为80x80图像，而是显示了更大的图像，并且仅显示其子部分。此代码可在all其他浏览器中工作，但IE 11除外，我确保已完全更新。]

这是下面的.svg代码：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 </g>
<g>
<title fill="#695ba8">Layer 1</title>
<path fill="#695ba8" id="svg_2" d="m50,21.101c1.119,0 1.9,-0.781 1.9,-1.9c0,-1.118 -0.781,-1.899 -1.9,-1.899s-1.9,0.781 -1.9,1.899c0,1.118 0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_3" d="m50,26.7c1.119,0 1.9,-0.781 1.9,-1.899c0,-1.119 -0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9c0,1.118 0.781,1.899 1.9,1.899z"/>
<path fill="#695ba8" id="svg_4" d="m50,15.501c1.119,0 1.9,-0.781 1.9,-1.9s-0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9s0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_5" d="m85,16.9c1.118,0 1.899,-0.781 1.899,-1.899c0,-1.119 -0.781,-1.9 -1.899,-1.9c-1.119,0 -1.9,0.781 -1.9,1.9c0,1.118 0.781,1.899 1.9,1.899z"/>
<path fill="#695ba8" id="svg_6" d="m55.6,15.501c1.119,0 1.9,-0.781 1.9,-1.9s-0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9s0.78,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_7" d="m55.6,26.7c1.119,0 1.9,-0.781 1.9,-1.899c0,-1.119 -0.781,-1.9 -1.9,-1.9s-1.9,0.781 -1.9,1.9c-0.001,1.118 0.78,1.899 1.9,1.899z"/>
<path fill="#695ba8" id="svg_8" d="m55.6,21.101c1.119,0 1.9,-0.781 1.9,-1.9c0,-1.118 -0.781,-1.899 -1.9,-1.899s-1.9,0.781 -1.9,1.899c-0.001,1.118 0.78,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_9" d="m44.4,15.501c1.118,0 1.899,-0.781 1.899,-1.9s-0.781,-1.9 -1.899,-1.9c-1.119,0 -1.9,0.781 -1.9,1.9s0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_10" d="m83.6,4.7l-67.2,0c-6.451,0 -11.7,5.249 -11.7,11.7l0,72.8c0,3.363 2.736,6.1 6.1,6.1l78.399,0c3.364,0 6.101,-2.736 6.101,-6.1l0,-72.8c0,-6.451 -5.249,-11.7 -11.7,-11.7zm-67.2,3.801l67.2,0c4.356,0 7.9,3.544 7.9,7.899l0,13.5l-83,0l0,-13.5c0,-4.355 3.544,-7.899 7.9,-7.899zm58.799,38.199l-50.399,0c-6.451,0 -11.7,5.249 -11.7,11.7l0,33.101l-2.3,0c-1.268,0 -2.3,-1.032 -2.3,-2.301l0,-55.5l83,0l0,55.5c0,1.269 -1.032,2.301 -2.301,2.301l-2.3,0l0,-33.101c0,-6.451 -5.249,-11.7 -11.7,-11.7zm-33.099,8.401l0,-4.6l15.8,0l0,4.6l-15.8,0zm-25.2,3.299c0,-4.355 3.544,-7.899 7.9,-7.899l13.5,0l0,5.1c0,1.819 1.48,3.3 3.3,3.3l16.8,0c1.819,0 3.299,-1.48 3.299,-3.3l0,-5.1l13.5,0c4.356,0 7.9,3.544 7.9,7.899l0,10.7l-66.199,0l0,-10.7zm66.2,14.781l0,18.32l-66.2,0l0,-18.32l66.2,0z"/>
<path fill="#695ba8" id="svg_11" d="m57,38.301l-14,0c-1.119,0 -1.9,0.781 -1.9,1.899c0,1.119 0.781,1.9 1.9,1.9l14,0c1.119,0 1.9,-0.781 1.9,-1.9c0,-1.118 -0.781,-1.899 -1.9,-1.899z"/>
<path fill="#695ba8" id="svg_12" d="m40.199,84.101l19.601,0c1.118,0 1.899,-0.781 1.899,-1.9s-0.781,-1.9 -1.899,-1.9l-19.601,0c-1.118,0 -1.899,0.781 -1.899,1.9s0.781,1.9 1.899,1.9z"/>
<path fill="#695ba8" id="svg_13" d="m44.4,21.101c1.118,0 1.899,-0.781 1.899,-1.9c0,-1.118 -0.781,-1.899 -1.899,-1.899c-1.119,0 -1.9,0.781 -1.9,1.899c0,1.118 0.781,1.9 1.9,1.9z"/>
<path fill="#695ba8" id="svg_14" d="m39.3,13.101l-26.2,0l0,12.2l26.2,0l0,-12.2zm-22.4,8.4l0,-4.601l18.6,0l0,4.601l-18.6,0z"/>
<path fill="#695ba8" id="svg_15" d="m44.4,26.7c1.118,0 1.899,-0.781 1.899,-1.899c0,-1.119 -0.781,-1.9 -1.899,-1.9c-1.119,0 -1.9,0.781 -1.9,1.9c0,1.118 0.781,1.899 1.9,1.899z"/>
 </g>
</svg>

这里是第二个在更改大小时似乎具有额外填充的图像：

<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">

 <title/>
 <g>
  <title>background</title>
  <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
 </g>
 <g>  
<title fill="#695ba8">Layer 1</title>
<path fill="#695ba8" id="svg_1" d="m41,21a9,9 0 1 0 -9,9a9.01,9.01 0 0 0 9,-9zm-16,0a7,7 0 1 1 7,7a7.009,7.009 0 0 1 -7,-7z" class="cls-1"/>
<path fill="#695ba8" id="svg_2" d="m37,21a5,5 0 1 0 -5,5a5.006,5.006 0 0 0 5,-5zm-8,0a3,3 0 1 1 3,3a3,3 0 0 1 -3,-3z" class="cls-1"/>
<path fill="#695ba8" id="svg_3" d="m48,60l-4,0l0,-5a1,1 0 0 0 -1,-1l-8,0l0,-9l3,0a1,1 0 0 0 1,-1l0,-5.353a18.972,18.972 0 0 0 -0.218,-35.374c-0.032,-0.011 -0.056,-0.034 -0.09,-0.043c-0.01,0 -0.02,0 -0.03,0a18.671,18.671 0 0 0 -13.324,0c-0.01,0 -0.02,0 -0.03,0c-0.034,0.009 -0.058,0.032 -0.09,0.043a18.973,18.973 0 0 0 -0.218,35.375l0,5.352a1,1 0 0 0 1,1l3,0l0,9l-8,0a1,1 0 0 0 -1,1l0,5l-4,0a1,1 0 0 0 0,2l32,0a1,1 0 0 0 0,-2zm-10.741,-55.158l-1.039,4.158l-8.44,0l-1.039,-4.158a16.844,16.844 0 0 1 10.518,0zm-22.259,16.158a17.006,17.006 0 0 1 9.867,-15.41l1.163,4.652a1,1 0 0 0 0.97,0.758l10,0a1,1 0 0 0 0.97,-0.758l1.163,-4.652a16.99,16.99 0 0 1 -10.009,32.164a16.6,16.6 0 0 1 -2.791,-0.728a17.023,17.023 0 0 1 -11.333,-16.026zm12,18.332c0.037,0.01 0.075,0.017 0.112,0.027c0.132,0.035 0.266,0.062 0.4,0.094c0.338,0.082 0.676,0.157 1.019,0.22c0.186,0.035 0.374,0.065 0.562,0.094c0.3,0.046 0.594,0.083 0.894,0.114c0.2,0.021 0.393,0.044 0.591,0.059c0.37,0.027 0.74,0.041 1.111,0.047c0.105,0 0.208,0.013 0.313,0.013s0.208,-0.011 0.313,-0.013c0.371,-0.006 0.741,-0.02 1.111,-0.047c0.2,-0.015 0.4,-0.038 0.592,-0.059c0.3,-0.031 0.595,-0.068 0.892,-0.114c0.188,-0.029 0.377,-0.059 0.565,-0.094c0.339,-0.063 0.675,-0.137 1.01,-0.218c0.135,-0.033 0.271,-0.061 0.405,-0.1c0.037,-0.01 0.075,-0.017 0.112,-0.027l0,3.672l-10.002,0l0,-3.668zm4,5.668l2,0l0,9l-2,0l0,-9zm-9,15l0,-4l20,0l0,4l-20,0z" class="cls-1"/>
<path fill="#695ba8" id="svg_4" d="m25,57l-1,0a1,1 0 0 0 0,2l1,0a1,1 0 0 0 0,-2z" class="cls-1"/>
<path fill="#695ba8" id="svg_5" d="m18,20l-1,0a1,1 0 0 0 0,2l1,0a1,1 0 0 0 0,-2z" class="cls-1"/>
</g>
</svg>

Answer 1

最佳解决方案是替换viewBox的宽度/高度您的第二个问题是什么，请给些抹子，因为我不知道发生了什么。我只是在IE11下进行了检查，并且可以很好地缩放svg，所以看不到任何多余的填充。