SVG的背景图像css中的样式在IE中不起作用

Question

我通过将类应用到元素来设置图标，因此这些类会更改属性 background-image 并为其设置一个 url。

我们来看一个例子：

.example-icon {background-image: url("data:image/svg+xml,%3Csvg%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20195.6%20107.8%27%3E%3Cpath%20fill%3D%27%23B5B5B5%27%20class%3D%27st0%27%20d%3D%27M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%27%2F%3E%3C%2Fsvg%3E");}

仅包含此 svg 但 url 编码：

<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195.6 107.8'><path fill='#B5B5B5' class='st0' d='M97.8 107.8c-2.6 0-5.1-1-7.1-2.9L2.9 17.1C-1 13.2-1 6.8 2.9 2.9 6.8-1 13.2-1 17.1 2.9l80.7 80.7 80.7-80.7c3.9-3.9 10.2-3.9 14.1 0 3.9 3.9 3.9 10.2 0 14.1l-87.8 87.8c-1.9 2-4.4 3-7 3z'/></svg>

这很好用（在所有浏览器中编码并仅在 Chrome 中解码）但是当我尝试在 SVG 中设置任何样式时问题就来了。例如：

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" width="20" height="20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#00FFFF;stroke:#FF7676;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="10" cy="10" r="9.5"/>
<path class="st1" d="M5,10h10 M10,5v10"/>
</svg>

这只是另一个 SVG，但里面有样式，问题是这在 IE 11 中不起作用（编码或解码）。

这里是我使用的编码版本：

%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%2300FFFF%3Bstroke%3A%23FF7676%3Bstroke-miterlimit%3A10%3B%7D%0A%3C%2Fstyle%3E%0A%3Ccircle%20class%3D%22st0%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229.5%22%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M5%2C10h10%20M10%2C5v10%22%2F%3E%0A%3C%2Fsvg%3E

我知道 IE 只加载格式正确的 url，但这是一个编码的。

对可能发生的事情有什么想法吗？

编辑：要求数据不使用base 64编码。

Answer 1

<style> {...} </style> 元素导致您无法解析 CSS 内容。您可以通过使用base64 编码字符串而不是 URL 编码字符串来克服这个问题：

.example-icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojMDBGRkZGO3N0cm9rZTojRkY3Njc2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30gPC9zdHlsZT4gPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTAiIGN5PSIxMCIgcj0iOS41Ii8+IDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01LDEwaDEwIE0xMCw1djEwIi8+IDwvc3ZnPg==');
  width: 20px;
  height: 20px;
}

<div class="example-icon"></div>

在 chrome、firefox、safari、ie>=9 中签入

更新 - 无 base64 要求

如果您在编码之前从字符串中删除所有换行符 (\r\n) 和制表符 (\t)，则编码后的 url 将起作用：

.example-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2300FFFF%3Bstroke%3A%23FF7676%3Bstroke-miterlimit%3A10%3B%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229.5%22%2F%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M5%2C10h10%20M10%2C5v10%22%2F%3E%20%3C%2Fsvg%3E");
  width: 20px;
  height: 20px;
}

<div class="example-icon"></div>

还签入了chrome、firefox、safari、ie>=9