内联SVG背景无法在Internet Explorer 11中工作

我在我的CSS中将以下内联SVG定义为背景图像。内联SVG背景无法在Internet Explorer 11中工作

div { 
    border: 1px solid black; 
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 
}

它在Chrome，Firefox和Edge中运行正常，但在Internet Explorer 11中失败。为什么？

JSfiddle here.

来源

2016-05-31 aanders77

你有完整的URL编码您的SVG。

如果您使用VSCode，有一个名为“URL编码”扩展，它会为你做到这一点...或者你可以很容易地找到一个在线：https://meyerweb.com/eric/tools/dencoder/

请注意，我也被删除“版本”属性和“字符集= UTF8”的一部分，不知道是否需要的，但要明确的事情了......

div { 
 
    border: 1px solid black; 
 
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%2010'%3E%3Cpath%20d%3D'M2%2010%20L8%200%20L10%200%20L10%2010'%20fill%3D'%238A92DF'%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: 100%; 
 
    width: 500px; 
 
    height: 500px; 
 
}

<div></div>

来源

2017-11-09 19:09:00

你来晚了党，但仍然是非常感激。现在我将更接近我的web应用程序中的完整IE11支持。 – aanders77

我知道:)我在谷歌搜索，这是第一个链接，所以我回答，任何人可能会在这里结束.... –

回答

相关问题