SVG 图标未在 IE 11/Edge 中显示答案

【问题标题】：SVG Icons not showing in IE 11/EdgeSVG 图标未在 IE 11/Edge 中显示
【发布时间】：2018-08-24 09:52:43
【问题描述】：

我在我的应用程序中使用以下 CSS 来显示 SVG 图标：

.edit {
  padding-right: 1em;
  background-image: url('data:image/svg+xml;utf8, <svg version="1.1" 
id="Inhalt" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" 
height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" 
xml:space="preserve"> <path d="M93.2,28.2l4.399-4.3c0.601-0.6,0.601-1.5,0-
2.1l-18-18.1c-0.6-0.6-1.5-0.6-2,0L73.2,8.1L93.2,28.2z"/><polygon 
points="18.1,62.2 68.1,13 88.2,33.2 38.3,82.4 "/><polygon points="12.5,68 
2.3,97.9 32.3,87.8 "/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;

}

然后在我的 html 代码中像这样使用它：

 <span class=edit>This is the edit button</span>

我已验证 IE 中的文档模式是 Edge/Standard。我该如何解决这个问题？

【问题讨论】：

标签： internet-explorer svg data-uri

【解决方案1】：

在数据 URI 中使用 SVG 时，您需要正确转义它。请参阅此工具（以及它链接到的博客文章）：

https://codepen.io/jakob-e/pen/doMoML

.edit {
  width: 200px;
  height: 200px;
  padding-right: 1em;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Inhalt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100px' height='100px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E %3Cpath d='M93.2,28.2l4.399-4.3c0.601-0.6,0.601-1.5,0- 2.1l-18-18.1c-0.6-0.6-1.5-0.6-2,0L73.2,8.1L93.2,28.2z'/%3E%3Cpolygon points='18.1,62.2 68.1,13 88.2,33.2 38.3,82.4 '/%3E%3Cpolygon points='12.5,68 2.3,97.9 32.3,87.8 '/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

&lt;div class="edit"&gt;&lt;/div&gt;

【讨论】：