html - 为什么 Internet Explorer 不能正确显示我的 .svg 图像？

Question

我的 html 文件中有一张图片：

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

和一些简单的CSS：

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

但是，不是将其显示为 80x80 图像，而是显示的图像更大，并且仅显示了其中的一个子部分。此代码适用于除 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>

标签： htmlcssimagesvginternet-explorer-11

Answer 1

最好的解决方案是替换viewBox的宽度/高度你的第二个问题是什么，请给一些屏幕，因为我不知道发生了什么。我刚刚在 IE11 下检查并很好地缩放 svg 我没有看到任何额外的填充。

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

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

// add this part to the test.svg file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs/>
  <path fill="none" d="M-1-1h582v402H-1z"/>
  <g>
    <path fill="#695ba8" d="M50 21.101c1.119 0 1.9-.781 1.9-1.9 0-1.118-.781-1.899-1.9-1.899s-1.9.781-1.9 1.899c0 1.118.781 1.9 1.9 1.9zM50 26.7c1.119 0 1.9-.781 1.9-1.899 0-1.119-.781-1.9-1.9-1.9s-1.9.781-1.9 1.9c0 1.118.781 1.899 1.9 1.899zM50 15.501c1.119 0 1.9-.781 1.9-1.9s-.781-1.9-1.9-1.9-1.9.781-1.9 1.9.781 1.9 1.9 1.9zM85 16.9c1.118 0 1.899-.781 1.899-1.899 0-1.119-.781-1.9-1.899-1.9-1.119 0-1.9.781-1.9 1.9 0 1.118.781 1.899 1.9 1.899zM55.6 15.501c1.119 0 1.9-.781 1.9-1.9s-.781-1.9-1.9-1.9-1.9.781-1.9 1.9.78 1.9 1.9 1.9zM55.6 26.7c1.119 0 1.9-.781 1.9-1.899 0-1.119-.781-1.9-1.9-1.9s-1.9.781-1.9 1.9c-.001 1.118.78 1.899 1.9 1.899zM55.6 21.101c1.119 0 1.9-.781 1.9-1.9 0-1.118-.781-1.899-1.9-1.899s-1.9.781-1.9 1.899c-.001 1.118.78 1.9 1.9 1.9zM44.4 15.501c1.118 0 1.899-.781 1.899-1.9s-.781-1.9-1.899-1.9c-1.119 0-1.9.781-1.9 1.9s.781 1.9 1.9 1.9z"/>
    <path fill="#695ba8" d="M83.6 4.7H16.4C9.949 4.7 4.7 9.949 4.7 16.4v72.8c0 3.363 2.736 6.1 6.1 6.1h78.399a6.107 6.107 0 006.101-6.1V16.4c0-6.451-5.249-11.7-11.7-11.7zM16.4 8.501h67.2c4.356 0 7.9 3.544 7.9 7.899v13.5h-83V16.4c0-4.355 3.544-7.899 7.9-7.899zM75.199 46.7H24.8c-6.451 0-11.7 5.249-11.7 11.7v33.101h-2.3A2.303 2.303 0 018.5 89.2V33.7h83v55.5a2.303 2.303 0 01-2.301 2.301h-2.3V58.4c0-6.451-5.249-11.7-11.7-11.7zM42.1 55.101v-4.6h15.8v4.6H42.1zM16.9 58.4c0-4.355 3.544-7.899 7.9-7.899h13.5v5.1c0 1.819 1.48 3.3 3.3 3.3h16.8a3.303 3.303 0 003.299-3.3v-5.1h13.5c4.356 0 7.9 3.544 7.9 7.899v10.7H16.9V58.4zm66.2 14.781v18.32H16.9v-18.32h66.2z"/>
    <path fill="#695ba8" d="M57 38.301H43c-1.119 0-1.9.781-1.9 1.899 0 1.119.781 1.9 1.9 1.9h14c1.119 0 1.9-.781 1.9-1.9 0-1.118-.781-1.899-1.9-1.899zM40.199 84.101H59.8c1.118 0 1.899-.781 1.899-1.9s-.781-1.9-1.899-1.9H40.199c-1.118 0-1.899.781-1.899 1.9s.781 1.9 1.899 1.9zM44.4 21.101c1.118 0 1.899-.781 1.899-1.9 0-1.118-.781-1.899-1.899-1.899-1.119 0-1.9.781-1.9 1.899 0 1.118.781 1.9 1.9 1.9zM39.3 13.101H13.1v12.2h26.2v-12.2zm-22.4 8.4V16.9h18.6v4.601H16.9zM44.4 26.7c1.118 0 1.899-.781 1.899-1.899 0-1.119-.781-1.9-1.899-1.9-1.119 0-1.9.781-1.9 1.9 0 1.118.781 1.899 1.9 1.899z"/>
  </g>
</svg>

第二个修复的svg文件

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs/>
  <g fill="#695ba8">
    <path d="M64.099 32.766c0-7.734-6.365-14.1-14.1-14.1-7.734 0-14.099 6.366-14.099 14.1 0 7.735 6.365 14.1 14.1 14.1 7.73-.008 14.091-6.368 14.099-14.1zm-25.066 0c0-6.015 4.95-10.966 10.966-10.966 6.016 0 10.967 4.95 10.967 10.966 0 6.016-4.95 10.967-10.967 10.967-6.012-.008-10.958-4.954-10.966-10.967z"/>
    <path d="M57.833 32.766c0-4.297-3.536-7.833-7.834-7.833-4.297 0-7.833 3.536-7.833 7.833 0 4.298 3.536 7.833 7.833 7.833 4.296-.004 7.829-3.537 7.834-7.833zm-12.533 0c0-2.578 2.12-4.7 4.7-4.7 2.578 0 4.7 2.122 4.7 4.7 0 2.579-2.122 4.7-4.7 4.7-2.58 0-4.7-2.121-4.7-4.7z"/>
    <path d="M75.065 93.864H68.8v-7.833c0-.86-.707-1.566-1.567-1.566H54.7v-14.1h4.7c.86 0 1.567-.707 1.567-1.567v-8.386c11.322-4.472 18.8-15.468 18.8-27.642 0-12.306-7.643-23.395-19.142-27.775-.05-.017-.088-.053-.14-.067h-.048a29.26 29.26 0 00-20.873 0h-.047c-.054.014-.091.05-.141.067-11.5 4.382-19.141 15.47-19.141 27.776 0 12.173 7.477 23.169 18.8 27.643v8.384c0 .86.706 1.567 1.566 1.567h4.7v14.1H32.767c-.86 0-1.567.706-1.567 1.566v7.833h-6.266c-.86 0-1.567.707-1.567 1.567s.707 1.566 1.567 1.566h50.131c.86 0 1.567-.706 1.567-1.566 0-.86-.707-1.567-1.567-1.567zM58.238 7.454l-1.627 6.513H43.388l-1.627-6.514a26.381 26.381 0 0116.477 0zm-34.87 25.312A26.682 26.682 0 0138.824 8.625l1.822 7.288a1.571 1.571 0 001.52 1.187h15.666c.715 0 1.345-.492 1.52-1.187l1.821-7.288A26.656 26.656 0 0176.611 32.78c0 14.601-12.015 26.617-26.616 26.617a26.586 26.586 0 01-8.873-1.524C30.514 54.11 23.38 44.02 23.367 32.766zm18.798 28.72c.058.015.118.026.176.042.207.055.417.097.627.147a27.14 27.14 0 002.477.492c.47.072.93.13 1.4.179.313.032.616.068.926.092.58.042 1.16.064 1.74.074.165 0 .326.02.49.02.165 0 .326-.017.491-.02a30.72 30.72 0 001.74-.074c.314-.024.627-.06.928-.092.47-.049.932-.107 1.397-.18.295-.044.59-.091.885-.146a30.242 30.242 0 001.583-.342c.211-.052.424-.095.634-.156.058-.016.118-.027.176-.043v5.753h-15.67v-5.747zm6.267 8.879h3.133v14.1h-3.133v-14.1zm-14.1 23.5v-6.267h31.333v6.266H34.333z"/>
    <path d="M39.033 89.164h-1.566c-.86 0-1.567.707-1.567 1.567s.707 1.567 1.567 1.567h1.566c.86 0 1.567-.707 1.567-1.567s-.707-1.567-1.567-1.567zM28.067 31.2H26.5c-.86 0-1.566.706-1.566 1.566 0 .86.706 1.567 1.566 1.567h1.567c.86 0 1.567-.707 1.567-1.567s-.707-1.566-1.567-1.566z"/>
  </g>
</svg>

上面的例子并不是为页面添加图标的最佳方案，最好使用内联图标。为什么？因为表演。下面如何执行此操作也适用于 IE11。每个图标都是一个单独的符号，带有我们引用的 id。

.image-class {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <g fill="#695ba8">
          <path
            d="M64.099 32.766c0-7.734-6.365-14.1-14.1-14.1-7.734 0-14.099 6.366-14.099 14.1 0 7.735 6.365 14.1 14.1 14.1 7.73-.008 14.091-6.368 14.099-14.1zm-25.066 0c0-6.015 4.95-10.966 10.966-10.966 6.016 0 10.967 4.95 10.967 10.966 0 6.016-4.95 10.967-10.967 10.967-6.012-.008-10.958-4.954-10.966-10.967z" />
          <path
            d="M57.833 32.766c0-4.297-3.536-7.833-7.834-7.833-4.297 0-7.833 3.536-7.833 7.833 0 4.298 3.536 7.833 7.833 7.833 4.296-.004 7.829-3.537 7.834-7.833zm-12.533 0c0-2.578 2.12-4.7 4.7-4.7 2.578 0 4.7 2.122 4.7 4.7 0 2.579-2.122 4.7-4.7 4.7-2.58 0-4.7-2.121-4.7-4.7z" />
          <path
            d="M75.065 93.864H68.8v-7.833c0-.86-.707-1.566-1.567-1.566H54.7v-14.1h4.7c.86 0 1.567-.707 1.567-1.567v-8.386c11.322-4.472 18.8-15.468 18.8-27.642 0-12.306-7.643-23.395-19.142-27.775-.05-.017-.088-.053-.14-.067h-.048a29.26 29.26 0 00-20.873 0h-.047c-.054.014-.091.05-.141.067-11.5 4.382-19.141 15.47-19.141 27.776 0 12.173 7.477 23.169 18.8 27.643v8.384c0 .86.706 1.567 1.566 1.567h4.7v14.1H32.767c-.86 0-1.567.706-1.567 1.566v7.833h-6.266c-.86 0-1.567.707-1.567 1.567s.707 1.566 1.567 1.566h50.131c.86 0 1.567-.706 1.567-1.566 0-.86-.707-1.567-1.567-1.567zM58.238 7.454l-1.627 6.513H43.388l-1.627-6.514a26.381 26.381 0 0116.477 0zm-34.87 25.312A26.682 26.682 0 0138.824 8.625l1.822 7.288a1.571 1.571 0 001.52 1.187h15.666c.715 0 1.345-.492 1.52-1.187l1.821-7.288A26.656 26.656 0 0176.611 32.78c0 14.601-12.015 26.617-26.616 26.617a26.586 26.586 0 01-8.873-1.524C30.514 54.11 23.38 44.02 23.367 32.766zm18.798 28.72c.058.015.118.026.176.042.207.055.417.097.627.147a27.14 27.14 0 002.477.492c.47.072.93.13 1.4.179.313.032.616.068.926.092.58.042 1.16.064 1.74.074.165 0 .326.02.49.02.165 0 .326-.017.491-.02a30.72 30.72 0 001.74-.074c.314-.024.627-.06.928-.092.47-.049.932-.107 1.397-.18.295-.044.59-.091.885-.146a30.242 30.242 0 001.583-.342c.211-.052.424-.095.634-.156.058-.016.118-.027.176-.043v5.753h-15.67v-5.747zm6.267 8.879h3.133v14.1h-3.133v-14.1zm-14.1 23.5v-6.267h31.333v6.266H34.333z" />
          <path
            d="M39.033 89.164h-1.566c-.86 0-1.567.707-1.567 1.567s.707 1.567 1.567 1.567h1.566c.86 0 1.567-.707 1.567-1.567s-.707-1.567-1.567-1.567zM28.067 31.2H26.5c-.86 0-1.566.706-1.566 1.566 0 .86.706 1.567 1.566 1.567h1.567c.86 0 1.567-.707 1.567-1.567s-.707-1.566-1.567-1.566z" />
        </g>
      </symbol>
    </svg>


<svg class="image-class">
  <use xlink:href="#icon"></use>
</svg>