hình ảnh dữ liệu SVG không làm việc trên Firefox

Question

Tôi đang thiết lập một SVG như background-image cho một yếu tố giả:

content: ''; 
position: absolute; 
right: 0; 
bottom: 0; 
    left: 0; 
width: 100%; 
height: 12px; 
background-image: 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" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12 49.3,0 99.1,0"/><polygon fill="#1E65AF" points="133.5,12 83.7,12 89,0 138.8,0"/><polygon fill="#D11A3C" points="156.3,12 106.5,12 111.8,0 161.6,0"/><polygon fill="#40BFC2" points="201,12 151.3,12 156.5,0 206.3,0"/><polygon fill="#1E65AF" points="216.4,12 166.6,12 171.9,0 221.7,0"/><polygon fill="#952592" points="226.5,12 176.7,12 182,0 231.7,0"/><polygon fill="#1E65AF" points="241.3,12 191.5,12 196.8,0 246.6,0"/><polygon fill="#40BFC2" points="260.9,12 211.1,12 216.4,0 266.2,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#40BFC2" points="364.2,12 314.4,12 319.7,0 369.5,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#952592" points="430.1,12 380.3,12 385.6,0 435.4,0"/><polygon fill="#1E65AF" points="465.6,12 415.8,12 421.1,0 470.9,0"/><polygon fill="#D11A3C" points="488.3,12 438.5,12 443.8,0 493.6,0"/><polygon fill="#D11A3C" points="620,12 613.4,12 618.7,0 620,0"/><polygon fill="#40BFC2" points="534.2,12 484.5,12 489.8,0 539.5,0"/><polygon fill="#1E65AF" points="548,12 498.2,12 503.5,0 553.3,0"/><polygon fill="#952592" points="556.5,12 506.7,12 512,0 561.8,0"/><polygon fill="#1E65AF" points="573.8,12 524.1,12 529.4,0 579.1,0"/><polygon fill="#40BFC2" points="592.5,12 542.8,12 548.1,0 597.8,0"/><polygon fill="#952592" points="614.4,12 564.6,12 569.9,0 619.7,0"/></g></svg>'); 
background-repeat: repeat-x; 
background-position: bottom; 

nhưng đối với một số lý do nó không hiển thị trên trình duyệt Firefox. Tôi không muốn sử dụng url dữ liệu base64. Không phải điều này có thể xảy ra trong Firefox không?

Answer 1

# ký tự trong URL được dành riêng để cho biết sự bắt đầu của số fragment identifier.

Bạn phải URL mã hóa nội dung URL dữ liệu, có nghĩa là chuyển đổi bất kỳ ký tự băm trong URL dữ liệu đến 23%