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

如何让Internet Explorer理解我的SVG css

Internet Explorer是一款老旧的浏览器,对于现代的Web技术支持较弱,包括对SVG(可缩放矢量图形)和CSS的支持也有限。然而,我们可以采取一些方法来让Internet Explorer理解我们的SVG CSS。

  1. 使用IE兼容的SVG属性:Internet Explorer对于一些现代的SVG属性可能不支持,因此我们需要使用IE兼容的属性。例如,使用fill属性替代color属性来设置填充颜色,使用stroke属性替代border-color属性来设置描边颜色。
  2. 使用IE兼容的CSS属性:类似地,Internet Explorer对于一些现代的CSS属性也可能不支持。我们需要使用IE兼容的属性来实现相同的效果。例如,使用-ms-transform替代transform属性来进行元素的变换。
  3. 使用IE兼容的CSS选择器:Internet Explorer对于一些现代的CSS选择器也可能不支持。我们需要使用IE兼容的选择器来选择元素。例如,使用.class替代:class选择器来选择具有特定类名的元素。
  4. 使用IE兼容的CSS前缀:一些现代的CSS属性在旧版的Internet Explorer中需要添加特定的前缀才能生效。我们需要使用这些前缀来确保样式在Internet Explorer中正确显示。例如,使用-ms-border-radius替代border-radius属性来设置圆角边框。
  5. 使用IE兼容的JavaScript库:如果需要在Internet Explorer中使用一些高级的SVG和CSS特性,我们可以考虑使用一些专门为兼容旧版浏览器而设计的JavaScript库,例如SVG.js和CSS3Pie。

总结起来,要让Internet Explorer理解我们的SVG CSS,我们需要使用IE兼容的SVG属性、CSS属性、CSS选择器和CSS前缀,并且可以考虑使用IE兼容的JavaScript库来实现高级特性。

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

相关·内容

如何理解css中的float

最近一段时间一直在为一个即将上线的新站进行一些前端开发。自然,对CSS的使用是必不可少的了。我们在CSS 中很多时候会用到浮动来布局。常见的有 float:left 或者 float:right 。...简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动。 上述这就是我们对于CSS中的浮动的最初步的认识了。...下面我就对float进行了一些简单的研究。 有几点需要注意: 1、 浮动元素会被自动设置成块级元素,相当于给元素设置了 display:block (块级元素能设置宽和高,而行内元素则不可以)。...2、 浮动元素后边的非浮动元素显示问题。 3、 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。 4 、子元素全为浮动元素的元素高度自适应问题。...http://www.cnblogs.com/roucheng/ 多个并列,同向,浮动的元素的高度不一致问题 多个同方向浮动元素若是高度不一致的话,很可能会得到意外的效果,跟你想要的布局差别很大。

1.1K10

我的 CSS 就是这么可爱——如何组织 CSS

很难不让人改的怀疑人生,最后选择重写一遍(呜呜呜,别骂了,别骂了)!在碰到过这种情况后,我意识到我们需要从一个整体的角度来指导 CSS 书写,从而让样式文件变得更加美丽!这也是我写这篇文章的初衷。...那么问题来了,为什么右边的代码会让我看上去舒服点?我在仔细比较这两块代码的区别之后,我找到了答案: 每块代码之间间隔有序,不至于给人一个无比庞大的概念。...不会管你使用哪种方式来进行格式化,我的看法是在遵循代码规范的前提下让 CSS 代码更加具有可读性。...你写的代码作为时间的锚点一直存在于那里,这又不是一种另类的未来与现在的对话吗?所以如何组织 CSS 呢?第一原则就是当成与自己的对话,做到你不嫌弃自己。...整洁的代码是由整洁的人写出来的,写出可爱的代码也一定是个可爱的人。我最开始写代码的理想的想通过虚拟世界来帮助我理解现实世界的复杂性。我们在将复杂、错乱的 CSS 代码进化为整洁、逻辑关注点清晰的代码。

64430
  • web字体规范

    但对于前端页面的终极使用者,他们可能系统没有这些字体,那么对于这些特殊字体究竟该如何处理? 本文通过与设计,产品,前端的统一沟通,达成共识如下。...css约定了五种都会支持的字体,另外不同系统也会支持不同的字体,汇总如下表格。...语法具体兼容见下图(数据统计来自于can i use):Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.但是, Internet...Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.注意: Internet Explorer...#iconfont) format('svg') } 二 其他站点信息采集 为了更好的理解这方面,我们采集了以下项目的字体规定情况(无一例外,正文字体都是继承来自body定义的font-family

    2.8K40

    我的理解—如何入门 AI

    前言 实际上上周我有思考过,我是不是应该适当的缓解下压力,一周七天,我都坐在电脑前,而且晚上睡得还不早,不论是身体还是精神上,有一点吃不消,毕竟我自己都说过,不能本末倒置,颠倒生命的意义,可是我自己都没做到...但有个前提大家需要了解,我也是 AI 的初学者,以下的建议只是我自己思考的结果,并没有说我已经经历过这些,这不是经验,而是想法和建议,仅供参考,你需要根据自己情况去斟酌对待。...首先,你得先明确自己为什么要学 AI,这很重要,可以参考下我上篇文章:AI 开篇—说说我学习 AI 的动机 为什么说动机很重要,因为这会决定了你学习 AI 的方式,我可以大概简单的分为两类,求职类和转型类...视频质量也非常高,视频中途如果有习题,视频会自动暂停,直到你提交了答案,才会继续,这种互动性让教学变得简单而有趣。...我们不能一味的求入门,而忽略的基础,基础太重要了,不管你处于什么阶段,你都应该注重基础的夯实。当然我也是个初学者,我也正在这个阶段,这些书这些课程我也正在努力的推进,所以大家都一样,一起加油吧。

    96160

    Edge 拥抱 Chromium 对前端工程师意味着什么?

    不久前,我写了一篇题为“慢慢死亡的 Internet Explorer ”的文章【https://alistapart.com/article/the-slow-death-of-internet-explorer-and-future-of-progressive-enhance...# CSS :placeholder-shown 的伪元素 placeholder-shown 甚至可以在 Internet Explorer 中使用,但不知何故从未在 Edge 中实现。...Microsoft 官方博客中标题为“把 Internet Explorer 作为默认浏览器的危险” 的文章得出结论:“Internet Explorer 是一种兼容性解决方案……大多数开发人员现在都没有在...Internet Explorer 上进行测试。”...赢得浏览器大战的 Internet Explorer 让人陷入了停滞状态。相比之下,Chrome 不断推出新功能。Google 积极参与 W3C 和 WHATWG 的 web 标准化组织。

    1.3K30

    腾讯云:WordPress教程网站中使用自定义字体

    谷歌字体是个不错的选择,它能够让字体在网页上显示的丰富多样,但是国内谷歌字体 Google Fonts 所在的 googleapis.com 网站被墙,根本加载不了,而且会导致 WordPress 加载速度变慢...在这种情况下,使用 CSS 的 @font-face 属性在网页中嵌入自定义字体成为最佳选择,下面的 WordPress 教程里,我们就向大家介绍一下 WordPress 网站中如何嵌入自定义字体。....TTF 或.OTF 格式字体,适用于 Firefox 3.5、Safari、Opera 浏览器 .EOT 格式字体,适用于 Internet Explorer 4.0+浏览器 .SVG 格式字体,适用于...在样式表中声明该字体 我们以 CygnetRoundRegular 字体为例,在 CSS 中加入如下代码: @font-face { font-family: ‘CygnetRoundRegular’...#CygnetRoundRegular’) format(‘svg’); font-weight: normal; font-style: normal; } 3.

    1.4K20

    SVG图形绘制入门第一弹

    关于SVG的文章和教程网络上有很多,我这一系列的ABC其实是我自己的一个学历历程 ,对于高手应该没有太大的帮助,对于还没有怎么写过的同学,可以一起开始学习。...然后我们看一下浏览器支持的情况: Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。...Internet Explorer 8或更早版本, 可通过安装Adobe SVG Viewer以支持SVG。 至于使用的取舍,要看各位的项目需求了。 简单的介绍完SVG,我们开始正式学习SVG。...然后我们看到500后面没有单位,SVG默认的单位是px,你也可以使用css里的其他单位,单位的知识在css学习中,已经全面了解,这里也不多做描述。 定义完画布,然后就可以在画布里绘图了。...demo demo里清楚的展示了可能的四种情况,上边两个图形分别是小角度逆时针,大角度逆时针,下边两个是小角度顺时针,大角度顺时针。 为了更直观的观察角度和方向,我闭合了弧形,让他成为一个饼图。

    3.2K70

    一篇文章带你了解SVG 阴影

    注意: Internet Explorer和Safari不支持SVG滤镜! 一、前言 defs 和 filte元素 所有互联网的SVG滤镜定义在元素中。...我的想法是采取一个SVG图形(图像或元素)并移动它在xy平面上一点儿。 偏移一个矩形(带),然后混合偏移图像顶部(含)。 Note: Internet Explorer and Safari...三、总结 本文基于Htm基础,主要介绍了通过SVG进行图像,阴影效果的呈现,feOffset元素在实际应用中对图像的阴影添加不一样的样式 ,呈现不一样的阴影层次。...通过丰富的案例分析,效果图的展示,让读者能够更好理解和学习。 大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

    90710

    【css基础】如何理解transform的matrix()用法

    css-transform-effects-1140x625.png 实现炫酷的网页动画效果,自然少不了css3中transform的属性,此属性功能丰富且强大,比如实现元素的位移translate(...,我们左边矩阵的每行与右边矩阵的每列分别相乘,相乘规则如矩阵与向量相乘的规则一样,最终得到矩阵的行数等于左边矩阵的行数,列数等于右边矩阵的列数。...这六个参数代表什么意思,这里先不做介绍,稍后会详细介绍,我们先从一个例子的应用来讲起,现在我们有这样一个元素,其对应的CSS属性如下: #transformedObject { position..., 1.375, 220, 20)的变换,css代码如下: #transformedObject { position: absolute; left: 0px; top:...: (220,20),(400,10),(370,120),(190,130) matrix参数详细介绍 上一小节,我们学习了如何利用向量和矩阵的知识,我们算出了元素经过matrix()变换后的最终结果

    2.8K40

    【css基础】如何理解transform的matrix()用法

    开篇 实现炫酷的网页动画效果,自然少不了css3中transform的属性,此属性功能丰富且强大,比如实现元素的位移translate(x,y),缩放scale(x,y),2d旋转rotate(angle...这六个参数代表什么意思,这里先不做介绍,稍后会详细介绍,现在我们有这样一个元素,其对应的CSS属性如下: #transformedObject { position: absolute;...)变换,css代码如下: #transformedObject { position: absolute; left: 0px; top: 0px; width: 200px...,scaleX对应的顺序进行举行相乘(矩阵相乘顺序不同结果不同),如下图所示:(运算的结果笔者就不写了,留给大家练习下矩阵相乘) 今天的内容就介绍到这里,我们理解了transform这个高级属性——matrix...()矩阵属性,通过这个属性我们了解其背后的数学逻辑,只有理解掌握这个属性后,我们才能实现更为复杂的动画效果。

    2.6K30

    JSConf 2010

    使用此插件,用户可以通过 Internet Explorer 的用户界面,以 Chrome 内核的渲染方式浏览网页。...JQuery 对 Dom 的 DSL 化封装,还有对 method chain 的大量使用,几乎让你感觉在声明行为,所以它让非常多的对啰嗦的 Dom 编程厌烦的前端程序员迅速 “上瘾”。...Both Firefox 3 and Internet Explorer 8 will support micro formats natively....Frontend Performance 指的是页面展示性能,在 Best of Steve 的 slider 中有此介绍: YSlow(分析网页,并提出如何提高其性能的基础上一套规则)最有效的途径包括...: 使用 CSS sprites(CSS 精灵,把一些散开的小图片合并成一张大图片) CDN(Content Delivery Network,即内容分发网络,将网站的内容发布到最接近用户的网络” 边缘

    73210

    修改网页自定义字体的CSS代码+图文教程

    HI,五一玩的怎么样?除了人山人海,高速堵车,高铁全是人之外其他都还好啦,是不是,哈哈哈~~~好了,不闹了,在假期有朋友问我,想要修改网页的字体怎么办?怎么更换网页的字体,又如何引用自定义字体呢?.../font/talklee.svg') format('svg'); } 其中@font-face可以加载服务器端的字体到浏览器端,这样我们就可以不受客户端字体库的限制。...一般来说有四种格式的字体文件即可覆盖所有浏览器,这四种格分别为: .EOT:适用于Internet Explorer 4.0+。...上传本地ttf格式文件,勾选“yes”转换完成点击“down”下载,然后把下载到的字体文件上传到服务器空间,引用主题路径就OK啦,下图是转换下载到本地的图片,大概就这样啊吧,我的演示文字小,所以可能不全...,只需要字体文件,其他文件和css都不需要的。

    2.4K20

    我是如何理解并使用maven的

    前言 一直想写一篇关于Maven的文章,但是不知如何下笔,如果说能使用,会使用Maven的话,一到两个小时足矣,不需要搞懂各种概念。那么给大家来分享下我是如何理解并使用maven的。...suiteXmlFiles> ---- 如何在...clean:清理输出目录target下生成jar包 compile:编译项目主代码 编译完成后,我们一般都会运行测试代码进行单元测试,虽然很多情况下,我们并没有这么做,但是我还是建议大家通过Maven做一些自动化的单元测试...但是这样拷贝就违背了我们当初想要自动解决依赖的问题,所以如何才能让其它的Maven项目直接引用这个JAR包呢? 我们需要执行mvn clean install命令,执行结果如下: ?...下载完成后,会自动进入交互模式,会让你输入一些基本信息,类似下面这样: ? 执行这个命令后,后看到很多输出,然后再按照提示一步步操作,一个Maven项目就创建成功了。

    1.6K30

    巧用 CSS3 filter(滤镜) 属性

    详细可查阅 CSS 动画 版本 CSS3 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 为指定浏览器的前缀。...图片 注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 “filter” 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。...在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。...例如:filter: url(svg-url#element-id) initial 设置属性为默认值,可参阅: CSS initial 关键字 inherit 设置属性为默认值,可参阅: CSS inherit...下面的水波纹效果就是基于 SVG 的feTurbulence滤镜实现的,原理参考了 说说SVG的feTurbulence滤镜 和SVG feTurbulence滤镜深入介绍 ,有兴趣的朋友可以深入阅读。

    1.4K10

    从IE6到IE11上运行WebGL 3D遇到的各种坑

    这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题,毕竟作为企业应用...,用户的机器运行着各式各样的办公及业务系统,有PB/Delphi之类的老CS应用,有安装了dll和ActiveX的各种安全认证和视频监控的插件,有装着flash或svg插件的flex和SVG应用,当然还有支持...-3d的CSS3功能让多少人欣喜诺狂,的确如果CSS3的3D功能各家浏览器能好好实现很多应用也就没WebGL啥事了,例如著名的famo.us 的经典元素周期表例子,尼玛的IE使用者就无福享受,看看以下MS...At this time, Internet Explorer 10 does not support the preserve-3d keyword....return语句,你妹的这个问题让我苦苦找了半天才发现,只能改变代码逻辑不用return的方式 目前我遇到的就这些坑了,有摔倒在其他坑的同学可以继续补充,采用threejs,babylonjs和Hightopo

    78830

    从IE6到IE11上运行WebGL 3D遇到的各种坑

    这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题,毕竟作为企业应用...,用户的机器运行着各式各样的办公及业务系统,有PB/Delphi之类的老CS应用,有安装了dll和ActiveX的各种安全认证和视频监控的插件,有装着flash或svg插件的flex和SVG应用,当然还有支持...-3d的CSS3功能让多少人欣喜诺狂,的确如果CSS3的3D功能各家浏览器能好好实现很多应用也就没WebGL啥事了,例如著名的famo.us 的经典元素周期表例子,尼玛的IE使用者就无福享受,看看以下MS...At this time, Internet Explorer 10 does not support the preserve-3d keyword....return语句,你妹的这个问题让我苦苦找了半天才发现,只能改变代码逻辑不用return的方式 目前我遇到的就这些坑了,有摔倒在其他坑的同学可以继续补充,采用threejs,babylonjs和Hightopo

    1.7K50

    可视化技术在 Nebula Graph 中的应用

    广义的可视化,可以理解为把一个复杂的信息通过一定的处理,让这个信息更简单、直观呈现在用户眼前,让用户更方便地去接受一些信息。...比如,Nebula Dashboard 是一款可视化运维监控产品,在这块的可视化实践不只是图标、动画,更多的是如何把复杂的运维信息通过简单的方式,让用户更容易地 Control 集群。...就可视化技术来说,前端展示常见的可视化渲染技术是 SVG、Canvas、CSS 和 WebGL,而用什么东西去画 SVG、Canvas 便是另外一个话题。...而 Nebula Dashboard 产品负责人汪洋表示常见可视化渲染技术如上所述的 CSS 和 SVG 等等,会根据所面临的应用场景、计算资源,针对性地定制化开发。...可视化产品设计 Nebula Explorer 有 2D 和 3D 两种图探索模式,当中涉及了页面如何布局的问题。

    82430
    领券