在Safari 8.0.3中CSS内联UTF编码的SVG - 404错误

Question

在CSS文档中，我使用UTF编码的SVG片段作为背景图像，如下所示：

body {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle fill="#529ECC" cx="8" cy="8" r="1"/></svg>');
}

SVG图像显示正常，但是，在Safari 8.0.3中，我收到控制台错误 -

`Failed to load resource: the server responded with a status of 404 (Not Found)`

这是一个jsbin demo - 控制台错误仅显示在实时预览中而非编辑页面中（单击输出面板上方的箭头图标）。

为什么会出现404错误（这不是URL请求而是数据字符串？），有没有办法阻止它？

更新：我在JSBin中包含了URL编码版本，但没有修复它。 Base64编码确实会停止错误，但我想根据this文章使用UTF。

Answer 1

数据网址的语法不正确，必须进行网址编码（或base64编码）。

例如＃是非法的，url编码会将其转换为％23