SVG 在 IE 中变形

Question

我正在尝试将 svg 嵌入到网页中。它在 Chrome 和 Firefox 中工作正常，但在 IE 中完全变形。请使用下面的 svg 代码块作为参考：

<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path 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" id="a"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path fill="#FFF" d="M-134-821h1400V297H-134z"/>
    <path fill="#FFF" d="M-134-821h1400V204H-134z"/>
    <path fill="#FFF" d="M-134-821h1400V204H-134z"/>
    <circle fill="#269F96" cx="16.5" cy="16.5" r="16.5"/>
    <use fill="#FFF" fill-rule="nonzero" xlink:href="#a"/>
  </g>
</svg>

Answer 1

所以有些浏览器很难使用 <use>、<mask> 和 <def> 标签。要解决此问题，您有时可以在图形编辑器中“展平”图像。删除任何包含图层等的文件夹

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

首先查看 href 属性 <use ... xlink:href="#a"> 中引用的 id。如您所见，它是 a
现在我们寻找带有 id="a" 的标签，在本例中它是 <def> 标签内的路径。这是意料之中的，因为 def 的意思是“定义供以后使用”。
删除 <def> 标签，但保留 <path id="a" ...> 及其所有内容。
将 <use> 标签（fill 和 fill-rule ）中的所有属性（xlink:href="#a" 除外）移动到 path#id="a" 元素。
删除 <use> 标签。
将所有 <path> 标签放在一个 <g> 标签内
在这种情况下，其他填充标签毫无意义（人工制品可能来自编辑器）。它们只是白色方块，因此您可以放弃它们。
我把圆圈放在第一位，因为它的渲染顺序是从上到下。所以从视觉上看，底层应该是一个圆圈，顶层是一些白色的图画。

最终结果应该是这样的：

没有 def 或 use 个标签。
根 g 标签内的所有形状
删除了无意义的形状。

.

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

我没有足够的信誉点来回答评论中@cloned 的问题。我发现关于 IE11 的一件恼人的事情是并非所有版本的 IE11 都会破坏相同。 Win7, Win8, Win8.1, Win10 之间的版本实际上对代码的节制不同。

SVG 在 IE 中变形

SVG getting distorted in IE

svg

internet-explorer-11