Firefox中的SVG无效属性值

时间:2015-09-02 10:22:29

标签: css firefox svg

我正在通过此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&amp; Safari,但在firefox中我得到无效的属性值,无法加载SVG。

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

有没有人遇到过这个或者能指出我正确的方向?

1 个答案:

答案 0 :(得分:5)

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

的开头

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