zoukankan      html  css  js  c++  java
  • 关于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特殊字符,最好能够对其进行编码,或者转义。

  • 相关阅读:
    hdu 4786 Fibonacci Tree
    Sae 上传文件到Storage
    Java通过代理server上网
    iOS 利用Socket UDP协议广播机制的实现
    android_handler(三)
    shell 脚本执行日志通用模块
    adt-bundle-linux-x86_64-20131030下新建project提示找不到adb和R.java问题的解决
    【MongoDB】The Access control of mongodb
    Java——设计模式(装饰模式_IO)
    动态顺序表
  • 原文地址:https://www.cnblogs.com/lger/p/10717195.html
Copyright © 2011-2022 走看看