Firefox 中的 SVG 无效属性值答案

【问题标题】：SVG invalid property value in FirefoxFirefox 中的 SVG 无效属性值
【发布时间】：2015-11-27 19:27:17
【问题描述】：

我正在通过这个 css 更改背景：

          background: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="10px" height="11px" viewBox="0 0 10 11" enable-background="new 0 0 10 11" xml:space="preserve">
         <g><g><path fill="#3477d1" d="M3.7,11c-0.3,0-0.6-0.2-0.8-0.4L0.2,6.9C-0.1,6.4,0,5.7,0.4,5.3C0.9,5,1.5,5.1,1.9,5.5L3.6,8l4.4-7.5 C8.4,0,9-0.2,9.5,0.2c0.5,0.3,0.6,1,0.3,1.5l-5.2,8.8C4.4,10.8,4.1,11,3.7,11C3.8,11,3.7,11,3.7,11z"/>
         </g></g></svg>');
      background-repeat: no-repeat;
      background-position: center;

它可以在 Chrome 和 Safari 中使用，但是在 Firefox 中我得到无效的属性值并且它无法加载 SVG。

我无法确定它指的是哪个属性。

有没有人遇到过这个问题或者可以为我指出正确的方向？

【问题讨论】：

标签： css firefox svg

【解决方案1】：

# 是 URL 中的保留字符，因为它表示 a fragment identifier. 的开始

您需要对 URL 进行 URL 编码，这意味着 # 将变为 %23

【讨论】：