html - 如何更改 SVG 颜色(在 CSS 中使用 SVG 作为背景时)

Question

我正在努力通过 css(svg 作为背景 css)更改 svg 对象的颜色。

我有这个

span {
    display:block;
    width: 12px;
    background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><polygon points="6,4.5 0,0 0,1.208 6,5.708 12,1.208 12,0"/></svg>');
    height: 20px;
}

这可行，但元素的颜色始终为黑色。我想将其颜色更改为自定义颜色(例如蓝色)。通过添加 style="fill:#2C30FF"，该元素就消失了，什么也不显示，尽管如果 svg 元素包含在 html 中(不是 css 背景)

有关示例，请参见 fiddle 。应该显示 3 个元素，但第二个没有显示，因为我添加了 style="fill:#2C30FF"

JsFiddle

为什么不起作用？非常感谢一些提示。

Answer 1

#是URL中的保留字符，表示start of a fragment identifier .

您需要将# URL 编码为 %23

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><polygon points="6,4.5 0,0 0,1.208 6,5.708 12,1.208 12,0" style="fill:%232C30FF;"/></svg>');

Updated fiddle