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

Question

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

11

我在我的CSS中将以下内联SVG定义为背景图片。

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 在此处。

- aanders77

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vinicius Cenci · Accepted Answer

你必须对svg进行完整的URL编码。

如果您使用的是VSCode，有一个名为“URL Encode”的扩展程序可以为您完成此操作...或者您可以轻松地在网上找到一个：https://meyerweb.com/eric/tools/dencoder/

请注意，我还删除了“version”属性和“; charset = 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>