SVG在IE中的变形

我正在尝试将svg嵌入到网页中。它在Chrome和Firefox中运行良好，但在IE中会完全失真。请使用以下svg代码块作为参考：

因此，一些浏览器在使用
、
和
标记时遇到困难。
要解决这个问题，您有时可以在图形编辑器中“展平”图像。删除任何包含图层等的文件夹

您也可以手动修复此问题。这并不难，只要做一次就可以帮助您学习SVG语法：

首先查看href属性
中引用的
id
。如您所见，它是
a
现在我们查找带有
id=“a”
的标记，在本例中，它是
标记内的路径。这是一种预期，因为def表示“定义以备将来使用”
移除
标签，但保留
及其所有内脏
将
标记（
fill
和
fill rule
）中的所有属性（除了
xlink:href=“#a”
）移动到
路径#id=“a”
元素
移除
标签
将所有
标记放在一个
标记内
在这种情况下，其他填充标记是没有意义的（工件可能来自编辑器）。它们只是白色的正方形，所以你可以把它们扔掉
我把圆圈放在第一位，因为这是按照顶部渲染底部的顺序渲染的。所以从视觉上看，底层应该是一个圆形，顶层是一些白色的图形
最终结果应该是这样的：


无
def
或
使用标签

根
g
标记内的所有形状
删除了无意义的形状




我没有足够的声望点来回答评论中的@cloned问题。关于IE11，我发现了一件恼人的事情，那就是并非所有版本的IE11都会破坏相同的功能。Win7、Win8、Win8.1和Win10之间的版本实际上控制代码的方式不同。
在我的IE中一点也不失真。请提供一个可复制的示例我没有足够的信誉点来回答评论中的@cloned问题。关于IE11，我发现了一件恼人的事情，那就是它们并不完全相同。Win7上的IE11与Win8、Win8.1和Win10的中断方式不同。
<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill="none" fill-rule="evenodd">
    <circle fill="#269F96" cx="16.5" cy="16.5" r="16.5"/>
    <path fill="#FFF" fill-rule="nonzero" d="M21 17.625h-3.375c-.619 0-1.125.506-1.125 1.125v3.375c0 .619.506 1.125 1.125 1.125H21c.619 0 1.125-.506 1.125-1.125V18.75c0-.619-.506-1.125-1.125-1.125zm0-11.25V7.5h-9V6.375c0-.619-.506-1.125-1.125-1.125S9.75 5.756 9.75 6.375V7.5H8.625a2.24 2.24 0 00-2.239 2.25L6.375 25.5a2.25 2.25 0 002.25 2.25h15.75a2.257 2.257 0 002.25-2.25V9.75a2.257 2.257 0 00-2.25-2.25H23.25V6.375c0-.619-.506-1.125-1.125-1.125S21 5.756 21 6.375zM23.25 25.5H9.75a1.128 1.128 0 01-1.125-1.125v-11.25h15.75v11.25c0 .619-.506 1.125-1.125 1.125z"/>
  </g>
</svg>