2

我正在使用 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)'

4

1 回答 1

3

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

它是 Firefox 不喜欢的 URL 中未编码的 # 字符，您的 URL 编码使 %23。

IE 更加严格，会让你的 URL 编码空格（如 %20）。

最好通过编码器粘贴整个 URL，网上有很多关于. 或者将数据转换为 base64。

于 2015-03-19T21:16:49.157 回答