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更簡單和容易。