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

debugcn 发表于 Dev

贾维耶尔

我通过将类应用于元素来设置图标，因此此类会更改属性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，但网址已编码：

<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，但这是经过编码的url。

关于会发生什么的任何想法？

编辑：要求数据未在base 64中编码。

德克尔

该<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中签入，即> = 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;
}