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

所以有些浏览器在使用svg的时候会出现问题 <use> 和 <def> 标签.为了解决这个问题，你有时可以在图形编辑器中 "扁平化 "你的图像。删除任何包含图层的文件夹，等等等等。

你也可以手动修复这个问题。这并不难，做一次有助于你学习SVG语法。

1. 先看一下 id 的href属性中引用的 <use ... xlink:href="#a">. 如你所见，它是 a
2. 现在我们寻找带有 id="a" 在这种情况下，它是在 <def> 标签。这也是意料之中的，因为 def 的意思是 "定义供以后使用"。
3. 移除 <def> 标签，但保持 <path id="a" ...> 及其所有内脏。
4. 将所有属性（除了 xlink:href="#a")中。<use> 标签(fill 和 fill-rule )至 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>