IE svg没有显示填充颜色

Question

我使用swiper.js作为简单的滑块图片库。它使用svg作为下一个和上一个箭头，并且我必须更改填充颜色以匹配我使用它的网站。 Firefox没有使用十六进制填充颜色，因此我将其更改为rgb，现在可以在Chrome和Firefox中使用。任何人都知道IE对SVG的支持以及如何解决这个问题？这是代码。

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='rgb(138,0,0)'/></svg>");
  left: 10px;
  right: auto;
}

有问题的部分是fill='rgb(138,0,0)'

Answer 1

使用data URI时，您需要对数据进行URL编码。

这是Firefox中不喜欢的URL中未编码的＃字符，URL编码为％23。

IE甚至更严格，会使你成为URL编码空格（如％20）。

最好通过编码器粘贴整个网址，有plenty of online ones about。或者将数据转换为base64。