Polymer SVG as CSS background-image not working

Question

我有一个含有元素的聚合物网络组件。该元素通过CSS（.example：before）附加了一个SVG背景图像。问题是SVG没有显示。它适用于标准的HTML页面，但不适用于聚合物元素内部。我通常会避免在CSS中嵌入SVG。但是，我们使用VideoJS（这不是可选的）和样式控件（添加图标），这些控件是使用JavaScript创建的。

SVG在聚合物/阴影Dom的CSS中有问题吗？下面

实施例：

<polymer-element name="example-element"> 
    <template> 

     <style> 
      .example :before { 
       background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#ffffff" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34.004px" height="36.871px" viewBox="0 0 34.004 36.871" enable-background="new 0 0 34.004 36.871" xml:space="preserve"><path d="M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871"/></svg>'); 
       background-repeat: no-repeat; 
       background-position: center; 
       background-size: 40%; 
       content: ""; 
       position: absolute; 
       left: 0; 
       width: 100%; 
       height: 100%; 
      } 
     </style> 

     <div class="example"></div> 
    </template> 
</polymer-element> 

任何解决方案，变通方法或替代方法，将不胜感激。

感谢，伊万

我想补充的说明是，SVG/CSS似乎是由浏览器来改变。

从（在CSS）：

background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#000000" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="34.004px" height="36.871px" viewBox="0 0 34.004 36.871" enable-background="new 0 0 34.004 36.871" xml:space="preserve"><path d="M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871"/></svg>'); 

向（由浏览器输出）：

background-image: url('data:image/svg+xml;utf8,<svg version=1.1 fill=#000000 id=Layer_1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=34.004px height=36.871px viewBox=0 0 34.004 36.871 enable-background=new 0 0 34.004 36.871 xml:space=preserve><path d=M5.198,36.871c-0.415,0-1.825-0.033-2.566-0.451l-0.205-0.108C1.579,35.867,0,35.039,0,33.371V3.61 c0-0.888,1.007-2.368,1.87-2.903c0.868-0.538,2.562-1.203,4.619-0.148l25.614,14.258c1.149,0.641,1.877,1.787,1.899,2.99 c0.023,1.274-0.582,2.416-1.619,3.051l-25.389,15.5C6.433,36.699,5.83,36.871,5.198,36.871/></svg>'); 

Answer 1

的URL是作为一个字符＃无效表明片段标识符的开始。您需要将＃个字符编码为％23。

你可能会发现简单的base64编码整个URL更简单和容易。