2015-06-09 11 views
20

पर काम नहीं कर रहा है एक छद्म तत्व के लिए background-image के रूप में एक एसवीजी सेट कर रहा हूं:एसवीजी डेटा छवि फ़ायरफ़ॉक्स

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; 

लेकिन किसी कारण से यह Firefox पर दिखाई नहीं देता। मैं बेस 64 डेटा-यूआरएल का उपयोग नहीं करना चाहता हूं। फ़ायरफ़ॉक्स में यह संभव नहीं है?

+0

करने के लिए डेटा, URL के हैश वर्ण परिवर्तित करने का मतलब है @Paulie_D ऊंचाई ठीक काम कर रहा है सांकेतिक शब्दों में बदलना URL चाहिए, यह एक फाउंडेशन सास कार्य है। उत्पादन इकाई में 12px है। मैंने भ्रम पैदा करने के लिए संपादित नहीं किया – supersize

+0

अगर मैं कभी भी अपने सीएसएस में पृष्ठभूमि छवि के रूप में इनलाइन करता हूं तो मुझे अपने svg और png को बेस 64 एन्कोड करना पसंद है। – hungerstar

+0

@ हंगरस्टार https://css-tricks.com/probably-dont-base64-svg/ – supersize

उत्तर

48

एक यूआरएल में # वर्ण fragment identifier की शुरुआत को इंगित करने के लिए आरक्षित है।

आप डेटा URL सामग्री है, जो% 23

+1

बिल्कुल मुझे क्या चाहिए। धन्यवाद! – supersize

+0

@ रॉबर्ट लॉन्गसन, क्या आपको पता है कि यह फ़ायरफ़ॉक्स और आईई एज और क्रोम से संबंधित ब्राउज़र के लिए विशिष्ट क्यों है इस खंड पहचानकर्ता नियम से परेशान नहीं है? या वे सिर्फ दयालु हैं? – PeterS

+0

@ पीटर्स आईई एज और क्रोम में इस संबंध में बग हैं। –

संबंधित मुद्दे