在使用生成的 圖作為``標簽是src值時，發現有部分瀏覽器顯示異常，所以這裡記錄下 參考鏈接 Data URLs http://www.faqs.org/rfcs/rfc2397.html https://developer.mozilla.org/zh CN/docs/Web/HTTP/data_ ...
在使用生成的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特殊字元，最好能夠對其進行編碼，或者轉義。
