CSS中的SVG DataURI在Firefox中不起作用

body { 
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='#3F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='#FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14 124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent; 
}

請在CSS中找到內聯SVG。這並不顯示任何背景。沒有得到任何問題。請讓我知道這是否是創建背景的正確方法？請注意我正在使用Firefox。在Chrome中也一樣。CSS中的SVG DataURI在Firefox中不起作用

來源

2015-12-16 Madhu V Rao

請嘗試創建一個MCVE – Amit

Firefox不喜歡你的數據URL的#。用%23替換所有哈希。

body { 
 
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30.000000pt' height='30.000000pt' viewBox='0 0 300.000000 300.000000' preserveAspectRatio='xMidYMid meet'><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%233F0607' stroke='none'><path class='node' id='node1' d='M1255 2979 c-214 -37 -373 -98 -560 -212 -105 -64 -246 -187 -333 -291 -457 -540 -483 -1307 -65 -1871 453 -611 1297 -784 1958 -402 156 91 335 250 448 399 31 42 57 80 57 84 0 4 6 15 14 23 30 34 105 191 140 293 124 359 113 724 -31 1078 -155 380 -487 695 -874 831 -246 86 -514 110 -754 68z m464 -544 c153 -37 268 -120 323 -233 31 -62 33 -73 33 -172 0 -82 -4 -115 -19 -150 -49 -111 -167 -242 -326 -359 -179 -132 -213 -178 -227 -302 l-8 -74 -55 0 -55 0 2 107 c3 151 25 219 118 363 114 178 161 315 151 445 -9 133 -48 204 -134 246 -47 24 -61 26 -135 22 -63 -3 -92 -10 -119 -26 -55 -34 -53 -51 12 -120 68 -72 85 -113 77 -190 -11 -108 -86 -165 -215 -164 -64 1 -82 5 -121 29 -134 83 -137 294 -8 427 84 85 184 138 312 162 88 17 306 11 394 -11z m-160 -1453 c25 -15 61 -49 80 -76 33 -46 36 -55 36 -125 0 -66 -4 -82 -27 -117 -108 -167 -308 -166 -417 1 -22 34 -26 51 -26 115 1 79 11 104 64 163 72 79 197 96 290 39z'></path></g><g transform='translate(0.000000,300.000000) scale(0.100000,-0.100000)' fill='%23FFFFFF' stroke='none'><path class='node' id='node4' d='M1325 2446 c-128 -24 -228 -77 -312 -162 -129 -133 -126 -344 8 -427 39 -24 57 -28 121 -29 129 -1 204 56 215 164 8 77 -9 118 -77 190 -65 69 -67 86 -12 120 27 16 56 23 119 26 74 4 88 2 135 -22 86 -42 125 -113 134 -246 10 -130 -37 -267 -151 -445 -93 -144 -115 -212 -118 -363 l-2 -107 55 0 55 0 8 74 c14 124 48 170 227 302 159 117 277 248 326 359 15 35 19 68 19 150 0 99 -2 110 -33 172 -55 113 -170 196 -323 233 -88 22 -306 28 -394 11z'></path><path class='node' id='node7' d='M1385 1011 c-67 -17 -116 -56 -160 -126 -14 -22 -19 -49 -20 -105 0 -64 4 -81 26 -115 109 -167 309 -168 417 -1 23 35 27 51 27 117 0 70 -3 79 -36 125 -61 85 -165 128 -254 105z'></path></g></svg>") 50% 50% repeat transparent; 
 
}

來源

2015-12-16 06:56:36

當您使用background-image引用svg作爲具有路徑的文件時。 background-image: url(http://www.domain.com/path/img.svg);

所以把所有的代碼，使SVG到一個文本文件中，然後從.txt擴展更改爲.svg

如果你想使用它內嵌轉換您的SVG使用這個工具：http://www.mobilefish.com/services/base64/base64.php

.imgSVG { 
    background: url("data:image/svg+xml;base64,[data]"); 
}

[data]部分是您放置從在線工具獲得的任何內容的位置。

SVG：https://css-tricks.com/using-svg/ URI：https://css-tricks.com/data-uris/

來源

2015-12-16 06:46:12 zer00ne

我想用一個內聯CSS作爲外樹形象訪問我的情況下是不可能的。 –

回答

相關問題