首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Microsoft Edge不会在对gzipped文件的ajax调用中呈现SVG样式元素

Microsoft Edge是微软公司开发的一款网页浏览器。它支持各种前端开发技术,包括HTML、CSS和JavaScript,并且具有强大的性能和安全性。

在对gzipped文件的ajax调用中,Microsoft Edge可能无法正确呈现SVG样式元素。SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它可以用于创建高质量的图形和动画效果。

当使用Microsoft Edge进行ajax调用时,如果返回的文件是经过gzip压缩的SVG文件,可能会导致样式元素无法正确呈现。这可能是由于Microsoft Edge在处理gzip压缩的SVG文件时存在一些兼容性问题。

为了解决这个问题,可以尝试以下几种方法:

  1. 禁用gzip压缩:在服务器端配置中禁用对SVG文件的gzip压缩。这样可以确保返回的文件不会被压缩,从而避免Microsoft Edge无法正确呈现SVG样式元素的问题。
  2. 使用其他浏览器:如果对于特定的SVG文件,Microsoft Edge无法正确呈现样式元素,可以尝试在其他浏览器中进行测试,如Google Chrome、Mozilla Firefox等。
  3. 更新Microsoft Edge版本:检查是否有可用的Microsoft Edge更新版本,并进行更新。新版本可能修复了一些兼容性问题,从而解决了对gzipped文件的ajax调用中呈现SVG样式元素的问题。

总结起来,Microsoft Edge可能在对gzipped文件的ajax调用中无法正确呈现SVG样式元素。为了解决这个问题,可以禁用gzip压缩、尝试其他浏览器或更新Microsoft Edge版本。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动端 Web 渲染解决方案

设计师通过 AE 导入的 svg 实际上是“假的” svg 应为实际上是动画通过 svg 设置,所有的静态图像都是 img 文件夹中的 png 文件 Canvas (W3C) 同样,IE9之前的浏览器都不支持...元素,canvas和SVG的主要区别是:使用canvas绘制图形是通过调用其API,而SVG则是通过构建一棵XML元素树来实现的。...与保留模式相反,不保存呈现的图形;要在每次需要新框架时描述整个场景,开发人员需要重新调用所有必需的绘图命令,而不考虑实际更改(SVG 已知拥有“场景图”)。...由于 SVG 要加载到 DOM 中,或者创建图像前至少要进行解析,所以性能会稍微有所下降,但相比于呈现网页的成本(大约几毫秒),这种下降是极其微小。...要保证在浏览器绘制 SVG 过程中无时滞,一个页面静态 SVG 元素大约可以绘制一万个,动态的 SVG 元素,就最好不要超过一千个。

3.6K40

2种方式!带你快速实现前端截图

来说要复杂一些, 基本原理是读取DOM元素的信息,基于这些信息去构建截图,并呈现在canvas画布中。...:入口文件,将dom节点渲染到一个canvas中,并返回。...获取到目标节点后,需要把克隆出来的目标节点的dom装载到一个iframe里,进行一次渲染,然后就可以获取到经过浏览器视图真实呈现的节点样式。...在对目标节点的解析方法中,递归整个DOM树,并取得每一层节点的数据,对于每一个节点而言需要绘制的部分包括边框、背景、阴影、内容,而对于内容就包含图片、文字、视频等。...构建内部渲染器 把目标节点处理成特定的数据结构之后,就需要结合Canvas调用渲染方法了,Canvas绘图需要根据样式计算哪些元素应该绘制在上层,哪些在下层,那么这个规则是什么样的呢?

4.1K21
  • 使用CSS提高网站性能的30种方法

    开发人员采取简单的方法,向不断增长的样式表添加更多属性。文件越大,下载和处理时间就越长。 CSS影响渲染:浏览器分三个阶段呈现页面:布局(元素尺寸)、绘画(文本、颜色、边框、阴影等)、和复合(定位)。...您的用户可能根本不会注意到。当然,你的设计师会... 7.删除不必要的字体 标准字体需要为每种粗细和样式创建单独的文件。您可以删除那些不常用的。 同样,您不太可能需要字体中的所有字符和字形。...更改任何子项的内容时,浏览器将不会重新计算该项目、列表中的其他项目或页面上的任何其他元素的大小或位置。渲染速度更快。 26.尝试渐进式渲染 渐进式呈现是一种为每个页面和组件定义单独样式表的技术。...对一个组件的样式所做的更改不会影响其他缓存文件。 你可以领养原生Web组件或在组件出现在HTML中之前立即引用较小的CSS文件: 样式表都是呈现阻止的,但每个文件不应超过几千字节。 较旧的浏览器可能会显示一个空白页面,直到所有CSS都加载完毕,但总体影响应该不会比一个大的呈现阻塞样式表更糟。

    3.5K20

    05_CSS进阶技巧

    我们以 icomoon 字库网为例,将下载包解压,解压之后的文件如图: 把下载包里面的 fonts 文件夹放入页面根目录下 在CSS样式中全局声明字体:简单理解把这些字体通过css引入到我们页面中 一定要注意字体文件路径问题...7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } html 标签内添加小图标 我们打开解压文件中的...3.3.3 字体图标的追加 如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。...更改用户的鼠标样式 表单轮廓 防止表单域拖拽 4.2 鼠标样式 cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状 li { cursor: pointer; } 属性值...\8F6F\96C5\9ED1 浏览器样式初始化 normalize Normalize.css 使浏览器呈现所有 HTML 元素更加一致,并且符合现代 web 标准。

    6810

    WEB动画的几种实现方式

    GIF 格式可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。...了解下有这个东东就够了哈 三、Javascript + HTML 原理: 其主要思想是通过 setInterval 或 setTimeout 方法的回调函数来持续调用改变某个元素的 CSS 样式以达到元素样式变化的效果...特性 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失...之后再写详细的文章研究。Canvas 主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过 javascript 来渲染控制动画的执行。...但是 transition 并不能实现独立的动画,只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是马上改变。

    2.4K20

    微信小程序开发:前端隐藏按纽样式,嵌套按钮不影响其它元素样式

    微信小程序有些限制,比如获取头像信息,手机号信息时必须使用 button 元素并且包含 open-type 属性,不然调用直接会失效,那么问题来了,我就想用一个图片来触发怎么解决。...我的思路是直接在图片元素外嵌套一层不可见的按钮就能解决了,通过设置还能忽略对原本样式的影响,就像什么都没有一样,点击图片照样触发按钮绑定的事件。...微信小程序前端开发: 样式使用 WXSS 文件进行定义,也类似于 CSS ,但是只支持微信小程序特定的样式属性。 4....微信小程序前端开发: 页面的生命周期由微信小程序框架控制,可以在对应的生命周期函数中编写相应的逻辑。 6....API 调用 Web 前端开发: 调用浏览器提供的 API 来实现与系统的交互,如 DOM 操作、 AJAX 请求等。

    18800

    前端面试实录CSS篇(最近一周)

    比如: hover,active, visited • 伪元素:用于创建一些原本不在文档树中的元素或样式, 比如:::after,::before。...解决高度塌陷问题:在对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为 0。解决这个问题,只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow:hidden。 3....1. bmp: 无损的,此图片格式不会对数据进行压缩,所以 bmp 格式的图片通常都是较大文件 2. git: 无损的,特点是文件小,适用场景:对色彩要求不高且文件体积较小 3. jpeg,jpg: 有损的...,有损压缩会导致图片模糊,文件类型比 gif 较大 4. png-8:无损的,png-8 比 gif 文件还小 5. png-24: 无损的,优点在于压缩了图片数据 6. svg: 无损矢量图,放大不会失真...• 1px 问题的本质:在一些 Retina 屏幕上,移动端页面的 1px 会变得很粗,所呈现出来不止是 1px 的效果,原因就是 CSS 中的 1px 不能和移动端的 1px 划等号,他们之间是有一个比例关系

    11210

    前端快速入门之概述

    前言:从百度说起 案例 点击百度搜索框显示出搜索结果 涉及前端的三大要素,从初级到高级的应用都可以由其完成,三者即: HTML(5) // 页面所有呈现元素(按钮、输入框、图片…)的“附着点”,所有页面可见元素都有对应的...CSS // 页面呈现元素的所有样式均可以由CSS进行控制,即文字的颜色、字号、间距,区块的排列等均由CSS指定,本质上仍然是对html标签的控制,只有该html标签具有某一属性,这时才能通过CSS对其进行控制...分析上述例子中的词语: 点击:由JavaScript完成,会触发一个request请求 百度搜索框:本质是input标签,通过CSS样式修饰为用户所见的样子 显示搜索结果:先前的请求到达后台后,经过处理返回查询结果...(如$.ajax())和同级代码之间的执行先后顺序,一般可将ajax请求方式设为同步执行即可解决,在包含复杂的数据请求时尤其要注意这一隐含问题。...//前端为固定的调用方式,后端有多种实现形式(Java、Node),例如Node的websocket 意义 //真正意义上的长连接,在此之前一般只能通过ajax轮询来实现;多次轮询只是多个请求返回各时间点的结果

    1.5K20

    5个你可能不知道的CSS属性

    :该值开启元素的大小限制。这意味着修改元素的大小可以不需要检查其后代。 :该值开启元素的布局限制。这规定外面任何东西都不会影响其内部布局,反之亦然。 :该值打开元素的样式限制。...因此,对元素及其后代可能产生影响的属性不会影响这个元素之外的任何内容。 :该值打开元素的绘制限制。这意味着元素的后代不会显示在其边界之外。...所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范中的不同值。 此外,Safari还支持此CSS属性的供应商前缀版本 。...: 没有剪贴 每个基本形状都有不同的参数。列出全部的参数很无聊。下面是两个应用了这个属性的两个示例图片: 除了Microsoft的浏览器(Edge和IE)之外,所有主流浏览器都支持。...(IE和Microsoft Edge不支持)。慢着,在继续之前,您应该注意一些事情: 您不应该将此属性应用于太多元素即使您的页面运行良好。它会减慢运行速度并消耗大量的资源和内存,这很不友好。

    1.2K80

    HTML 面试知识点总结

    (浏览器渲染过程) FOUC:主要指的是样式闪烁的问题,由于浏览器渲染机制(比如firefox),在 CSS 加载之前,先呈现了 HTML,就会导致展示 出无样式内容,然后样式突然呈现的现象。...SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素 附加 JavaScript 事件监听函数。...并且 SVG 保存的是图形的绘制方法,因此当 SVG 图形缩放时并不会失真。 详细资料可以参考: 《SVG 与 HTML5 的 canvas 各有什么优点,哪个更有前途?》 48....Flash、Ajax 各自的优缺点,在使用中如何取舍?...在 Normalize.css 中就不会有这样的问题,因为在 我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。

    1.9K20

    5个你可能不知道的CSS属性

    fallback: 使用自定义字体渲染的文本在短时间内 (大约 100ms) 不可见,之后浏览器将持续加载自定义字体,这个期间,文本将以无样式的状态呈现,当自定义字体加载好了之后,文本将会被赋予自定义的字体...style:该值打开元素的样式限制。因此,对元素及其后代可能产生影响的属性不会影响这个元素之外的任何内容。 paint:该值打开元素的绘制限制。这意味着元素的后代不会显示在其边界之外。...所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范中的不同值。 此外,Safari还支持此CSS属性的供应商前缀版本 。...下面是两个应用了这个属性的两个示例图片: 除了Microsoft的浏览器(Edge和IE)之外,所有主流浏览器都支持clip-path。此外,您应该记住支持此属性的浏览器的一些注意事项。...(IE和Microsoft Edge不支持)。慢着,在继续之前,您应该注意一些事情: 您不应该将此属性应用于太多元素即使您的页面运行良好。它会减慢运行速度并消耗大量的资源和内存,这很不友好。

    93320

    年薪30万的前端面试题,你能答对几道?|附答案

    DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。...此外,元素在读屏软件中也会被隐藏; Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。...这种方式产生的效果就像元素完全不存在; Position:不会影响布局,能让元素保持可以操作; Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。...如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低; 3.CSS清除浮动的几种方法(至少两种) 使用带clear属性的空元素 使用CSS的overflow属性; 使用CSS...MIME类型的文件 文件显示 浏览器这边做的工作大致分为以下几步: 加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。

    5.6K60

    《最新出炉》系列初窥篇-Python+Playwright自动化测试-63 - Canvas和SVG元素定位

    1.简介今天宏哥分享的在实际测试工作中很少遇到,比较生僻,如果突然遇到我们可能会脑大、懵逼,一时之间不知道怎么办?所以宏哥这里提供一种思路供大家学习和参考。...svg绘制出来的图是不会的。SVG英文全称为Scalable vector Graphics,意思为可缩放的矢量图,这种元素比较特殊,需要通过 name() 函数来进行定位。...6.页面上用多个svg元素1.如果页面上用多个svg元素,通过//*[name()="svg"] 会定位全部的svg元素,为了区分定位具体的哪个,可以通过父元素的区分。...//*[name()="svg" and @width="500"]7.定位svg 上的子元素1.如果需要定位svg 下的子元素,如下图的text属性。...9.小结 今天主要讲解和分享了一些Canvas和SVG的基础知识和应用,然后进入主题SVG的定位相关知识的讲解。有一种会者不难,难者不会的感觉。

    36730

    mxgraph教程_graph绘图

    mxGraph的其他很多概念都是以cell作为基础的:样式、布局、内容文本、事件、位置… 误区 前面提到mxGraph的图形分为两类:vertex(点)和edge(边),但实际上它们都属于mxCell类的实例...官方文档提供的beginUpdate和endUpdate函数,写法上和数据库的事务提交很像,也有文章说是进行批量处理,实际上只是为了避免多次触发而合并了change事件而已,如果不使用这两个函数不会对绘图结果产生什么影响...所有的布局算法类都是“继承”自基类mxGraphLayout,自定义了一些属性,同时实现API函数execute,mxGraph在绘制图形的时候会调用这个函数。...一个强大之处是支持在svg中插入HTML元素,官方给出的examples中有个htmllabel.html实现了类似功能。...概括地说两步实现: 在创建点的时候插入一个 UserObject 对象声明,表明此处可以插入DOM元素。 重载 convertValueToString 函数,返回DOM元素。

    2.3K10

    前端经典面试题(有答案)_2023-03-01

    (6)SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时,看到的还是线和曲线,而不会出现像素点。...通俗来讲:BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。...在BFC中上下相邻的两个容器的margin会重叠 计算BFC的高度时,需要计算浮动元素的高度 BFC区域不会与浮动的容器发生重叠 BFC是独立的容器,容器内部元素不会影响外部元素 每个元素的左margin...解决高度塌陷的问题:在对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。...两者区别如下: (1)在渲染树中 display:none会让元素完全从渲染树中消失,渲染时不会占据任何空间; visibility:hidden不会让元素从渲染树中消失,渲染的元素还会占据相应的空间,

    1.3K20

    一篇文章带你了解网页框架——Vue简单入门

    --我们采用{{}}来调用相关Vue中的data中存放的数据--> {{ message }} 的连接 EL挂载点设置后,页面属性可以调用Vue中的数据(data)和方法(method) EL挂载点注意点: Vue的作用范围在EL挂载点的本体元素以及后代元素中 Vue的EL挂载点可以依赖于各种选择器...--当我们修改文本的值时,VsCode中的代码不会发生变化,但实际上message已经发生变化,我们将message的值单独列出来--> microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ */ background-image...所以如果想要完成项目开发功能,还需要与后台交互的技术Ajax(主要采用Axios技术) Axios技术 Axios技术是原生的Ajax进行封装,简化书写 我们在之前的Ajax专题中有完整的介绍过Ajax

    97720
    领券