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

为什么这个SVG图形缩放在IE9和10(预览版)中没有?

这个问题涉及到了SVG(可缩放矢量图形)在IE9和10预览版中的兼容性问题。为了解决这个问题,我们需要了解SVG的基本概念和它在不同浏览器中的兼容性。

SVG是一种基于XML的图像格式,它允许在网页中创建矢量图形,这些图形可以根据需要缩放而不会失去质量。SVG在现代浏览器中得到了广泛的支持,但在旧版本的IE浏览器中,尤其是IE9和10预览版,它的支持可能会有所限制。

要解决这个问题,可以尝试以下方法:

  1. 使用SVG的polyfill库:polyfill库是一种兼容性解决方案,它可以为旧版本的浏览器提供新特性的支持。有一些库可以为IE9和10提供SVG支持,例如:SVG4Everybody和SVGeezy。
  2. 使用CSS缩放:如果只是需要对SVG图形进行缩放,可以使用CSS的transform属性来实现。例如,可以使用以下CSS代码来将SVG图形缩放到50%:
代码语言:css
复制
svg {
  transform: scale(0.5);
}
  1. 使用SVG的viewBox属性:viewBox属性可以定义SVG图形的可视区域,并允许在不同的尺寸和分辨率下显示图形。例如,可以使用以下代码来定义SVG图形的viewBox:
代码语言:html
复制
<svg width="500" height="500" viewBox="0 0 500 500">
  <!-- SVG图形内容 -->
</svg>

通过使用这些方法,可以解决SVG图形在IE9和10预览版中的缩放问题。推荐的腾讯云相关产品和产品介绍链接地址:

  1. 腾讯云对象存储(COS):腾讯云对象存储是一种分布式存储服务,可以存储和管理大量的非结构化数据,例如图片、视频、音频等。腾讯云对象存储可以帮助用户实现数据的高效存储和访问,提高应用程序的性能和可靠性。
  2. 腾讯云CDN:腾讯云CDN是一种内容分发网络服务,可以将用户的静态资源(如图片、视频、CSS、JS等)分发到全球的CDN节点上,从而加速资源的访问速度,提高用户体验。
  3. 腾讯云云巢:腾讯云云巢是一种容器管理平台,可以帮助用户快速部署和管理容器化应用程序。腾讯云云巢可以帮助用户实现应用程序的快速扩展和迁移,提高应用程序的可维护性和可靠性。

这些产品都可以帮助用户实现更好的应用程序性能和可靠性,提高用户体验。

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

相关·内容

微软:IE9可实现Web页面所有内容硬件加速

如今,各大浏览器都开始使用硬件来加速图形性能,IE9 Beta也即将发布,微软在此时对比了完全硬件加速部分硬件加速之间的区别,向众人揭示了IE9的优越性。...2010年3月,微软发布了IE9首个平台预览版,默认开启了GPU加速HTML5功能,将硬件加速运用到了Web页面的每一个内容上,包括文本、图像、背景、边框、SVG内容HTML5视频/音频,主要使用了Windows...DirectX图形API。...IE9硬件加速 浏览器可以使用硬件来加速一个HTML页面所有步骤的一些或是全部,下图中就描述了IE9的HTML页面渲染主要步骤: IE9页面渲染共分为三大阶段: 内容渲染:IE9在第一个阶段使用Direct2D...DirectWrite子系统内容渲染的硬件加速; 页面生成:IE9这个阶段使用Direct3D加速页面绘制,在渲染图片密集型任务时为IE提供优异的性能; 桌面生成:在浏览器完成内容渲染并生成页面后,

82320

聊一聊“@font-face”

除此之外,opentype 除基本字符集外还提供了别的扩展,比如小号大写字符,老式的数字,以及其他一些图形。...既然 opentype 有这么多优点,那为什么我们上面的代码没用使用 opentype 呢?首先,微软建议如果只需要在屏幕上显示文字推荐用 truetype 格式。...IE9 之前的版本没有按照标准解析字体声明,当 src 属性包含多个 url 时,它无法正确的解析而返回 404 错误,而其他浏览器会自动采用自己适用的 url。...因此把仅 IE9 之前支持的 EOT 格式放在第一位,然后在 url 后加上 ?,这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。...绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 可以使用 IE7 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ?

1.4K50
  • 该如何正确的使用SVG sprites?

    然后同事说一个一个的图标好麻烦,我说可以用svg sprite啊,~~>﹏<,这个时候轮到同事一脸懵逼了……,所以想着可能是不是同样还有很多同学也不知道SVG symbols呢,那么这就给大家分享一下:...      大家都知道svg( Scalable Vector Graphics)可伸缩矢量图形SVG是一种采用XML 来描述二维图形的语言,无论如何放大缩小都不会糊,而图片当展示的尺寸大于图片本身...: 从ps或者Illustrator创建并导出SVG图标,源码大概是这样的: 重点来了,那么我们用symbols包装后是这个样子的: 那么问题来了,我们直接在页面上引用吗...白看你说这么多废话,最后不能用,坑爹……     别慌,其实也没有那么糟糕啦 ,**SVG只在IE9以上支持;所以如果你需要支持IE8及以下的浏览器**,你需要另外再写一套降级(例如,使用png图片方案...),随着科技的发展,IE9以上大多数人还是能接受啦,特别是手机端的用户,再也不用担心测试MM来找你,图标不清晰的问题了啦,是不是很开心,有没有~~   以上就是今天的分享,写了蛮久,最近才在开始尝试写博客

    2.1K20

    移动端 Web 渲染解决方案

    SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 PS:SVGIE9以及Firefoxchrome下都支持...设计师通过 AE 导入的 svg 实际上是“假的” svg 应为实际上是动画通过 svg 设置,所有的静态图像都是 img 文件夹的 png 文件 Canvas (W3C) 同样,IE9之前的浏览器都不支持...对象数量较小 (<10k)、图面更大(或同时满足这二者)时性能更佳 PS:关于10K这个分界线的来源不是很清楚 根据 MSDN 的解释,SVG Canvas 能够实现几乎相同的效果,在不同应用场景下...出于这些原因,我们将高保真度的复杂矢量文档放在谱表的远端,接近 SVG,如下图中所示。 ? 这些文档也可以受益于交互性,这是 SVG 使这些方案最适合于保留图形模式的第二方面。...如果你需要一次绘制一千个以上的图形并让他们动起来,或者你需要你的图形做一些特殊的动画效果,这时候 Canvas 就有 SVG没有的优势了。

    3.5K40

    网络图形标准

    前端绘图有几种方式,主流的网络图形标准有: VML,IE 支持; SVG,FF、Safari Opera 支持; Canvas,HTML5 规范支持。...VML 支持动态脚本的调用,即可以在 VML 嵌套 JavaScript。其实这也没有什么奇怪的,本身是 DOM 对象, JavaScript 的关联与 HTML 并无二致。...IE9 以下的版本如果要支持 SVG,需要安装 Adobe 公司的一个名为 Adobe SVG Viewer 的插件,不过效果一定不如浏览器原生支持出色(只有 IE 原生不支持 SVG,浏览器 IE...HTML5 大势所趋,IE9 也支持了 Canvas。Canvas SVG 有相当程度互补之处,相比而言 VML 应该是将被淘汰的标准。...值得一提的是,当前 SVG VML 在浏览器支持度的不同,使得诸多前端矢量图形库针对 IE 非 IE 做了两套实现,保证在 IE 下用 VML 渲染,而其他浏览器则用 VML 渲染,而对于 Canvas

    73000

    高清ICON SVG解决方案(上) - 腾讯ISUX

    为什么iconfont会出现锯齿?...SVG技术 什么是SVGSVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。...SVG是W3C制定的一种新的二维矢量图形格式,也是规范的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种图像分辨率无关的矢量图形格式。...接下来我们来看看使用iconfont使用SVG做出来的图标有什么差异: Chrome下效果 ? FF下效果 ? IE9下效果 ?...在IE9+下的效果上我们看到IE对SVG的支持性着实差的令人无法直视,IE10,IE11效果IE9几乎一样(真的是坑爹)。

    3.2K40

    该如何以正确的姿势插入SVG Sprites?

    严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面,SVG是一种采用XML 来描述二维图形的语言,那么 symbol元素是什么呢?...symbol元素对图形的作用是在同一文档多次使用,添加结构语义,SVG是无论如何放大缩小都不会糊,而图片当展示的尺寸大于图片本身,就会糊了,糊了,糊了…… 1.1 回顾 Css Sprites <div...白看你说这么多废话,最后不能用,坑爹……   别慌,其实也没有那么糟糕啦 ,SVG只在IE9以上支持;所以如果你需要支持 IE8及以下的浏览器,你需要另外再写一套降级(例如,使用png图片方案),随着科技的发展..., IE9以上大多数人还是能接受啦,特别是手机端的用户,再也不用担心测试MM来找你,图标不清晰的问题了啦,是不是很开心,有没有~~ 总结: Svg Sprites相比Css Sprites,不管是在维护开发的过程...Css Sprites优缺点: Css Sprites使用background-position不便于维护扩展、定位不精确等问题,例如:在后期项目迭代我们需要删除其中一个小图,那么排在它后面的小图位置都要移动

    64440

    设计师使用SVG的必读文章

    设计师主要是利用AI,Sketch进行SVGicon,SVG拓扑图的绘制。 但是,单纯依靠软件一键导出的SVG图形,会因为每位设计师的绘制导出方法不同,在实际使用中出现或多或少的应用问题。...如果选择维持TEXT版本,我们看到,样式里存了字体的属性,也就是说,如果用户的电脑没有PingFang这个默认字体,是会选择系统的默认字体进行替换的。设计师要考虑是否可以接受这种字体的变化 。...[图片] [图片] 很多设计师常迷茫的问题:“ 为什么我导出的SVG图片好好的,但是被UI开发同学引用的时候,就出错了呢?”...其实,这是因为,单独在浏览器查看这个SVG,嵌入或是链接的方式都没有问题;但如果使用标签来引用这个SVG,浏览器的 img 是不允许加载外部资源的,也就是我们说的,“一个图片,咋还能还引用了一张图片呢...响应:如下图差别,勾选响应的SVG图形会被赋予width=“100%”,height=“100%” 的属性,图片内容将根据外框大小进行自动缩放。在腾讯云的日常业务,我们建议保持固定大小。

    5.6K61

    为什么要用SVG?- svg与iconfont、图片多维度对比

    上面我说过它是图形所以在浏览器中使用的是图形渲染,所以SVG没有这种问题,请看下图对比: 详细的原因可查看我之前写的这篇文章《高清ICON SVG解决方案(上)》 2.icon font只能支持单色...3.ion font可读性不好 icon font主要在页面用Unicode符号调用对应的图标,这种方式不管是浏览器,搜索引擎对无障碍方面的能力都没有SVGSVG的制作成本与维护成本 目前制作SVG...项基本上是碾压了icon font,数据如下: 页面图标数量:491个 上图SVG案例我用了两种不同引用方式,一种是在页面直接inline svg方式插入的方法svg sprite合并后引用图标的两种...2、大批量的测试结果SVG性能已经比较有保证了,但实际项目中一个页面不可能会存在这么多图标,我们按正常页面出现图标10-30个这个区间, _取15个图标为中间值在进行一次测试看看,结果如何: 页面图标数量...兼容性 关于兼容性,在咱祖国一直是一个比较伤感的话题,不过从IE9开始已经开始兼容SVG了,安卓3.X开始局部支持,如果你需要兼容老旧浏览器,请查看《高清ICON SVG解决方案(下)》 ##总结 通过上面所述

    5.4K50

    数据可视化基础 - 笔记

    分析推理 证实假设 交流思想 # 可视化设计原则方法 能够正确的表达数据的信息而不产生偏差与歧义 # 常见的错误 透视失真: 如果数字是由视觉元素表示的,那么他们应该与视觉元素的感知程度成正比...使用清晰、详细彻底的标签,以避免图形失真含糊不清 图形设计 & 数据尺度: 图形的每一部分都会产生对其的视觉预期: 这些预期往往决定了眼睛实际看到的东西 错误的数据洞察,产生于在图形的某个地方发生的不正确的视觉预期推断...将数据元素放在靠近的位置,可以突出它们之间的关联性。 相似原则 形状、大小、颜色、强度等属性方面比较相似时,这些物体就容易被看作一个整体。...通过其声明式语言,可以用 JSON 格式描述可视化的视觉外观交互行为,并使用 Canvas 或 SVG 生成视图 G2:— 套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性扩展性...ECharts:一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 移动设备上,兼容当前绝大部分浏览器( IE9/10/11,Chrome,Firefox,Safari 等),

    36310

    04-移动端开发教程-在线字体

    在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....为什么要用在线字体 问题 精灵图(雪碧图)用作背景的时候不能轻易的放大缩小。...低质量的位图在高清设备上放大后会有难看的锯齿,无法满足响应式页面的开发需求 在线字体带来的革命: 在线字体本质就是文字,但是也可是像图形的文字。...在线字体 @font-face是CSS3的一个模块,他主要是把自己定义的Web字体嵌入到你的网页,允许我们不依赖操作系统的字体,做到全平台字体统一定制。...这就意味着在@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4.

    3.2K60

    04-移动端开发教程-在线字体图标

    在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1....为什么要用在线字体 问题 精灵图(雪碧图)用作背景的时候不能轻易的放大缩小。...低质量的位图在高清设备上放大后会有难看的锯齿,无法满足响应式页面的开发需求 在线字体带来的革命: 在线字体本质就是文字,但是也可是像图形的文字。...在线字体 @font-face是CSS3的一个模块,他主要是把自己定义的Web字体嵌入到你的网页,允许我们不依赖操作系统的字体,做到全平台字体统一定制。...这就意味着在@font-face我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。 4.

    3.2K60

    HTML5(九)——超强的 SVG 动画

    1.1、set set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。...> 1.5、animateMotion 可以定义动画路径,让SVG各个图形,沿着指定路径运动。...我们上述制作的 SVG 图形、动画等,运行在低版本IE,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素...第二种:在一个元素创建画布 创建语法: var paper = Raphael(element, width, height); element是元素节点本身或ID width、height是画布的宽度高度...3.2、绘制图形 画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。

    3.7K30

    HTML5(九)——超强的 SVG 动画

    1.1、set set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。...> 1.5、animateMotion 可以定义动画路径,让SVG各个图形,沿着指定路径运动。...我们上述制作的 SVG 图形、动画等,运行在低版本IE,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素...第二种:在一个元素创建画布 创建语法: var paper = Raphael(element, width, height); element是元素节点本身或ID width、height是画布的宽度高度...3.2、绘制图形 画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。

    3.1K40

    HTML5(九)——超强的 SVG 动画

    1.1、set set 为动画元素设置延迟,此元素是SVG中最简单的动画元素,但是他并没有动画效果。...> 1.5、animateMotion 可以定义动画路径,让SVG各个图形,沿着指定路径运动。...我们上述制作的 SVG 图形、动画等,运行在低版本IE,发现SVG只有IE9以上才支持,低版本的并不能支持,为了兼容低版本浏览器,可以使用 VML ,VML需要添加额外东西,每个元素需要添加 v:元素...第二种:在一个元素创建画布 创建语法: var paper = Raphael(element, width, height); element是元素节点本身或ID width、height是画布的宽度高度...3.2、绘制图形 画布创建好之后,该对象自带SVG内置图形有矩形、圆形、椭圆形。

    2.4K20

    在网站或桌面应用使用Font Awesome图标库

    背景 网页小图标到处可见,如果一个网页都是干巴巴的文字图片,而没有小图标,会显得非常简陋。下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到。...如果沿着这个方向考虑,你会发现,自己将在这上面耗费大量资源精力。...网页应用font-awesome: 去官网下载,解压之后,应该能看到“css”“font”两个文件夹。css文件夹存放着css文档,font文件夹放在着适用于不同浏览器的字体文件。...在WPF中使用FontAwesome之类的字体图标 在WPF程序,一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。...虽然这样也比较方便,但XAML的智能提示没有代码那么强大(只输入后面的部分大部分情况下提示不出来),另外感觉还是没有一个总体的视图,许多时候还是得看看上面的那个网页。

    2.1K20

    D3.js库-1-入门篇

    ,总结D3.js库的几大特点: 一款基于JavaScript的函数库 借助HTML、SVGCSS等实现可视化 组件强大,通过数据驱动的方式来操作DOM 安装 下载最新的版本V5.16.0。...SVG:可缩放矢量图形,用于绘制可视化的图形 以上知识点没有必要掌握的非常精通,建议到W3school快速入门,了解基本概念,再看几个案例demo,以后遇到不懂的地方可以进行查看。...D3测试了Firefox、Chrome、Safari、OperaIE9。D3的大部分组件可以在旧的浏览器运行。 Chrome是最好的选择。强大的调试功能会让你事半功倍!...服务器软件:Apache、Tomcat等,这个是非必须的。...可缩放矢量图形,即SVG,是W3C XML的分支语言之一,用于标记可缩放的矢量图形 SVG-菜鸟课程 SVG|MDN SVG图像入门教程|阮一峰老师 D3.js 第一个推荐的网站肯定是D3官网

    19.2K30

    Vue 折腾记 - (4) 写一个不大靠谱的 loading 组件

    前言 有需求,就要动手丰衣足食...公司考虑兼容IE9,那么css3 animation写的loading就无缘了 因为keyframes IE10+ , 那么要实现会动且可控的(颜色,大小),好像就剩下...先说说实现的思路 一个遮罩层,一个显示loading...通用法则 svg动效的loading直接git上找,一搜一大堆;(会写动效svg的小伙伴赞一个,我没时间研究这个) 遮罩层有两种情况下,一个是全局...props的字段限制,默认值 computed的运用 部分webpack配置的改动 svg一丢丢知识 大体就这样了,再来说说爬的坑 svg可以继承颜色大小(css),前提哈,svg内置代码没有fill...: { svgType: { type: String, // 字符串类型 default: 'bars' // 默认的loading图形 },...Boolean, default:false, }, loadingText: { type: String, default: '拼命加载.

    54920
    领券