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）。

最好通过一个编码器把整个URL粘住，还有plenty of online ones about。或者将数据转换为 base64。

IE svg 不显示填充颜色

IE svg isn't showing the fill color

internet-explorer

svg

swiper