data:image 从聚合物元素模板内部链接到的样式表的背景中断

Question

在此处查看我要创建的 <swiper-slider> 元素：

特别是这个文件：

https://github.com/leoj3n/swiper-slider/blob/master/swiper-slider.html#L19

安装它并检查 <div class="swiper-button-next"></div> 以查看 background-image CSS 如何链接到 data:image/svg+xml;charset=utf-8,<svg...，当在新选项卡中打开时，报告：error on line 1 at column 11: AttValue: " or ' expected .

如果我添加以下声明：

.swiper-button-next {
  background-image: url('http://lorempixel.com/output/abstract-q-c-185-114-8.jpg');
}

在包含之后的 <style> 标签中，会出现一张背景图片，所以我不确定为什么 data:image/svg+xml.

会出现问题

关于 CSS 背景的 data:image/svg+xml 为何失败的任何见解？

Answer 1

删除编码 "charset=utf-8" 它应该可以完成工作。

Answer 2

对您的数据进行解码和重新编码 URL，我最终得到了这个：

url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2027%2044%27%3E%3Cpath%20d%3D%27M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%27%20fill%3D%27%23007aff%27%2F%3E%3C%2Fsvg%3E");

使用 URL 转义单引号，这对我来说似乎在阴影中工作正常 DOM:

http://jsbin.com/qorawe/1/edit?html,css,console,output

不过，我不确定为什么这在自定义元素内部和外部的工作方式不同。

Answer 3

这对我有用 this Github issue:

一种解决方法是将 url 函数内的任何引号替换为 url 编码字符：

双引号 (") 替换为 '%22':

my-css-selector {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22><path d=%22M5.7 2L4.3 3.4 8.88 8l-4.6 4.6L5.7 14l6-6z%22/></svg>');
}

经测试可与 Polymer 1.4.0、Chrome（桌面）、Safari（桌面和移动）、Firefox 和 Edge 一起使用。 IE11 无法呈现 SVG。

data:image 从聚合物元素模板内部链接到的样式表的背景中断

data:image backgrounds break for stylesheets linked to from inside the polymer-element template

polymer