關於Data URLs svg圖片顯示出錯和瀏覽器URL hash #


在使用生成的svg圖作為<img>標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下

參考鏈接

Data URLs
http://www.faqs.org/rfcs/rfc2397.html
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs
URL hash
http://www.ruanyifeng.com/blog/2011/03/url_hash.html
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/hash

<img src="Data URLs">中,Data URLs格式與顯示情況如下:

//1. 部分瀏覽器不能正常顯示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="#795548" x="0" y="0" width="100%" height="100%"></rect><text fill="#FFF" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">jack</text></svg>

//2. 采用base64編碼svg,正常顯示
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHJlY3QgZmlsbD0iIzc5NTU0OCIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PC9yZWN0Pjx0ZXh0IGZpbGw9IiNGRkYiIHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9ImNlbnRyYWwiIGZvbnQtc2l6ZT0iMTYiIGZvbnQtZmFtaWx5PSJWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWYiPmphY2s8L3RleHQ+PC9zdmc+

//3. 采用%23轉義#,正常顯示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="%23795548" x="0" y="0" width="100%" height="100%"></rect><text fill="%23FFF" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">jack</text></svg>

//4. 采用rgb代替hex color,正常顯示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect fill="rgb(121,85,72)" x="0" y="0" width="100%" height="100%"></rect><text fill="rgb(255,255,255)" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">jack</text></svg>

上面給出的Data URLs中第一個與其他的不同之處就是包含了URL的敏感字符#,其被作為hash使用,用於瀏覽器網頁內部的網頁位置指定標識符,#后面出現的任何字符,都會被瀏覽器解讀為位置標識符。

這里我用以上鏈接直接使用瀏覽器訪問,73版谷歌瀏覽器和66版火狐瀏覽器對於第一個Data URLs給出的結果都是解析異常,這里我的猜測(意淫)就是這種Data URLs其實是瀏覽器內部識別了URL標識,其又充當了一台服務器,對當前Data URLs進行解析,之后內部直接給出數據。而它們在處理data:image/svg+xml時將#后面的字符串當做為位置標識符,沒有將#后數據提交至瀏覽器內部解析器(我認為的模擬服務器)中,所以就出現了數據丟失解析異常。

以上分析純屬個人猜測。反正這里需要注意的就是,采用Data URLs時有可能出現URL特殊字符,最好能夠對其進行編碼,或者轉義。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM