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 语法：

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

最终结果应该是这样的：

• 没有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>

我没有足够的声望点来回答 cmets 中的@cloned 问题。我发现关于 IE11 的一件烦人的事情是，并非所有版本的 IE11 都会破坏相同的内容。 Win7、Win8、Win8.1、Win10之间的版本实际上对代码的节制是不同的。