关于Data URLs svg图片显示出错和浏览器URL hash #使用指南_svg小白基础

在使用生成的svg图作为标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在中,Data URLs格式与显示情况如下://1. 部分浏览器不能正常显示
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" hei

关于Data%20URLs svg图片显示出错和浏览器URL hash #使用指南

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=”Data%20URLs”>中,Data%20URLs格式与显示情况如下:

关于Data URLs svg图片显示出错和浏览器URL hash #使用指南_svg小白基础

//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%20URLs中第一个与其他的不同之处就是包含了URL的敏感字符#,其被作为hash使用,用于浏览器网页内部的网页位置指定标识符,#后面出现的任何字符,都会被浏览器解读为位置标识符。

这里我用以上链接直接使用浏览器访问,73版谷歌浏览器和66版火狐浏览器对于第一个Data%20URLs给出的结果都是解析异常,这里我的猜测(意淫)就是这种Data%20URLs其实是浏览器内部识别了URL标识,其又充当了一台服务器,对当前Data%20URLs进行解析,之后内部直接给出数据。而它们在处理data:image/svg+xml时将#后面的字符串当做为位置标识符,没有将#后数据提交至浏览器内部解析器(我认为的模拟服务器)中,所以就出现了数据丢失解析异常。

以上分析纯属个人猜测。反正这里需要注意的就是,采用Data%20URLs时有可能出现URL特殊字符,最好能够对其进行编码,或者转义。

来自:https://www.cnblogs.com/lger/archive/2019/04/16/10717195.html

海计划公众号
(0)
上一篇 2020/03/30 16:08
下一篇 2020/03/30 16:08

您可能感兴趣的内容

  • Designup小白知识_国内新创的设计兼职平台

    Designup小白知识 官方网址:https://www.designup.cn/ 简介描述:国内新创的设计兼职平台 国内新创的设计兼职平台:UI、交互设计、H5设计、LOGO/…

    2020/03/06
  • 关于网页本地存储的一些思考菜鸟攻略_存储小白攻略

    前言关于localStorage sessionStorage之类的api怎么用已经无需我再赘述了,但是具体怎么落实到一个稍微复杂一些的业务中还是需要做一些前期的准备遇见的一些问题1.localStorage 与 sessionStorage具体适用于什么样的业务场景?2.如何维护本地储存?3.如何进行版本控制?4.碰到禁止本地缓存的情况下怎么解决这个问题?

    2020/04/05
  • 你不得不了解的前后端分离原理!使用帮助_接口基础知识入门

    前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax

    2020/03/29
  • KPI过时了?为什么科技公司更偏爱OKR?指南教程_职场小白帮助

    除了KPI,考核员工还有什么方式?OKR是一种简单的管理方法,但是对于其误解和各种疑惑却很多。推崇者把OKR说得是无所不能,反对者认为不过是新瓶装旧酒,和KPI差不多。到底OKR和KPI,哪种方式更靠谱?技术leader该怎么选?今天,阿里资深技术专家燕标谈谈,他对OKR的思考。引子每过一段时间,就会出现一波新的管理概念方法和理念。最近OKR逐渐走到聚光灯下

    2020/03/23
  • 前端脚手架的那些事儿小白入门_脚手架菜鸟教程网

    本来早就想写这篇文章的,由于有其他事情耽搁了(可能还是因为太懒),就拖到了现在,如果再不记下来,估计会抛到九霄云外了。NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构,让我们可以更多的关注业务,

    2020/03/22
  • 一对一直播私聊软件【 同城1对1视频】新手入门_直播菜鸟指南

    一对一直播模式一对多就是一个主播需要面对两个以上的用户,而一对一就是主播只会面对一个用户这里建议独占欲强的人,如果你想要和主播搞暧昧的话,就别去一对多了 原因很简单,一对多主播需要服务前来观看的用户,所以根本不可能专注服务你一个人,除非你充的钱多。但充的钱再多也要和其他土豪竞争看看谁才是真真的土豪,所以这就是为啥要选择一对一,除非你真的是土豪中的土豪。 如果

    2020/03/23
  • 小程序获取当前路径和参数小白指南_参数小白攻略

    基本用法获取路径var pages = getCurrentPages(); //获取加载的页面
    var currentPage = pages[pages.length – 1] //获取当前页面的对象
    var url = currentPage.route //获取页面url
    console.log(url); //打印url
    获取路

    2020/03/24
  • Vue 的 .sync 修饰符零基础入门_vue基础指南

    Vue 的 .sync 修饰符零基础入门 写在前面 .sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世…

    2020/03/19
  • 五百丁简历入门基础_个人简历,简历模板

    五百丁简历入门基础 官方网址:http://www.500d.me/ 简介描述:个人简历,简历模板 五百丁创办于2014年,目前已有全球超过700万精英用户正在使用,是国内使用人数…

    2020/03/06
  • DOM 高级工程师不完全指南基础教程_dom使用指南

    本文干货部分翻译自: Use the DOM like a Pro译者:kyrieliu(劉凯里)“前端框架真的太香了,香到我都不敢徒手撕 DOM 了!”虽然绝大多数前端er都有这样的困扰,但本着基础为大的原则,手撕 DOM 应当是一个前端攻城狮的必备技能,这正是本文诞生的初衷 —— DOM 并没有那么难搞,如果能去充分利用它,那么你离爱上它就不远了。三年前

    2020/03/22
  • Js常用的继承方式入门教程_继承入门知识

    JavaScript常用继承方式主要分为(7种):原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承以及继承多个对象。1:原型链继承(核心:将父类的实例作为子类的原型基本概念:重写原型对象,赋予一个新的对象的实例。基本思想就是让一个原型对象指向另一个父类的实例。function Super() {
    //基本数据类型
    this.text

    2020/03/26
  • TypeScript 设计模式之观察者模式基础入门_模式入门知识

    观察者模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下:期刊出版方 —— 负责期刊的出版和发行工作。订阅者 —— 只需执行订

    2020/03/20
  • asm-dom入门百科_一个极小的WebAssembly虚拟DOM专注于性能

    asm-dom入门百科 官方网址:https://mbasso.github.io/asm-dom GitHub:https://github.com/mbasso/asm-dom…

    2020/03/07
  • 怎么彻底删除nodejs?菜鸟教程_node入门基础教程

    怎么彻底删除nodejs?菜鸟教程 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript…

    2020/03/20
  • H+入门指南一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题

    H+使用攻略 官方网址:http://www.zi-han.net 简介描述:一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题 H+是一个完全响应式,基于B…

    2020/03/06
  • JS实现遍历不规则多维数组的方法基础入门_Array小白指南

    我们有时候处理数据,可能会遇到一些不规则(无法预料的数据结构),那么拿到这种数据我们如何进行遍历操作呢?举个例子: var data= {a: { one: 1, two: 2, three: {four:’2′,five:’4′} },b: { six: 4, seven: 5, eight: 6 },c: { nine: 7, ten: 8}
    }比如上边

    2020/04/05