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

Angular: svg上的attr.class不适用于IE

Angular是一种流行的前端开发框架,用于构建单页应用程序。它使用HTML模板和JavaScript代码来创建动态的Web应用程序。

在Angular中,使用svg元素时,可以通过attr.class属性来添加类名。然而,这种方式在Internet Explorer(IE)浏览器中可能不起作用。

IE浏览器对于svg元素的处理方式与其他浏览器不同,因此在使用Angular时需要注意兼容性问题。为了解决这个问题,可以使用ngClass指令来代替attr.class属性。

ngClass指令是Angular提供的一个指令,用于动态地添加或移除元素的类名。通过ngClass指令,可以根据条件来动态地添加或移除类名,从而实现在svg元素上添加类名的效果。

以下是一个示例代码,演示了如何在Angular中使用ngClass指令来添加类名:

代码语言:txt
复制
<svg>
  <circle [ngClass]="{'my-class': true}"></circle>
</svg>

在上述示例中,当条件为true时,ngClass指令会将类名"my-class"添加到circle元素上。

对于IE浏览器的兼容性问题,建议使用polyfills来解决。Polyfills是一种用于填充浏览器功能差异的代码,可以在不同浏览器之间提供一致的行为。

关于Angular的更多信息和相关产品,您可以访问腾讯云的官方文档和网站:

  • Angular官方网站:https://angular.io/
  • 腾讯云前端开发服务:https://cloud.tencent.com/product/fed
  • 腾讯云云原生应用服务:https://cloud.tencent.com/product/tke
  • 腾讯云CDN加速服务:https://cloud.tencent.com/product/cdn
  • 腾讯云安全加速服务:https://cloud.tencent.com/product/ddos
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ionic4兼容IE浏览器处理

在一般场合,Ionic4运行在手机端,没必要去兼容IE,但还是可以了解一下,以免有这样需求。 Ionic4,它更趋向于一个UI框架,然后可配套Angular、React、Vue等框架使用。...以Angular版本为例,兼容IE浏览器,主要是JS+CSS语法和用法调整处理。 1. JS,可以使用内置Polyfill方案。...Angular项目默认提供了Polyfill支持,打开Ionic4项目中src目录,里面有自动生成polyfill.ts文件,打开可以看到这样内容: /**********************...and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run...If you use AOT (and only Angular decorators), you can remove. import 'core-js/es7/reflect'; 为了减轻打包大小

1.4K20

移动端touch事件无视disabled属性 转

后来,自己在bootstrapUI框架下,做了个实验,按照平常习惯,写了个button.btn.btn-default,再添加disabled属性,模拟项目环境,依然引入了Angular + hammerjs...接着,我把问题简化,移除Angular 和 hammerjs,只使用jquery绑定touch事件,发现依然不会触发touch事件,上个类似我当时使用 实验代码。...我们来看一下mdn怎么说: The CSS property pointer-events allows authors to control under what circumstances (...一共有11个值,其中只有 auto 和 none 是普通web元素,其他都是 SVG onlySVG相关我们暂不讨论。 auto 是默认值。...又是IE拖后腿了囧,不过移动端表现良好~ 总结 pointer-events这个CSS3属性,在移动端我们基本可以“放肆”使用,在你需要禁用某个元素事件或某个区域事件时候,可以考虑下这个属性,简单高效

2.3K20

IM Admin 是一个免费开源中后台模版,快速搭建可配置前端后台系统

使用了最新vue3.0+,vite2,TypeScript, Ant Design Vue3.0+等主流技术开发,开箱即用中后台前端解决方案,也可用于学习参考。...vites-admin-pro.git 安装依赖 cd vites-admin-pro yarn install 运行 yarn serve 打包 yarn build Git 贡献提交规范 参考 vue 规范 (Angular...依赖更新/脚手架配置修改等 workflow 工作流改进 ci 持续集成 types 类型定义文件更改 wip 开发中 浏览器支持 本地开发推荐使用Chrome 80+ 浏览器 支持现代浏览器, 不支持 IE...IE Edge Firefox Chrome Safari not support last 2 versions last 2 versions last 2 versions last 2 versions...vite-plugin-compression - 用于打包输出.gz|.brotil 文件 vite-plugin-svg-icons - 用于快速生成 svg 雪碧图 维护者 yulin.nie

58520

Angular8稳定版修改概述

所以基本你会有: ? 使用此功能将减小捆绑包大小。 ? 但这是如何工作? 基本Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...这允许在现代用户代理和旧用户代理中经典脚本中选择性地执行模块脚本. SVG作为模板 您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联HTML或外部HTML作为模板。...它不是完全正常运行(选择预览),正如Igor Minar在ngConf 2019中建议那样,视图引擎仍然推荐用于新应用。...我认为这是gulp/grunt“旧时代”中命令。 基本,构建器只是一个带有一组命令函数,您可以createBuilder()从@angular-devkit/architect包传递给方法。...: TemplateRef; 以上功能不适用于ViewChildren或ContentChildren。它们将在变更检测运行后解析。

4.5K20

如何为应用选择最合适图像格式

从上图这个图中,我们可以从不同角度得出一些结论: PNG 8 格式图片颜色过度处理得很突兀,能看到很明显波浪褶皱,这就是因为它最多只能存储256种颜色导致,所以PNG 8不适用于存储颜色复杂图像...相反,由于其相对于 PNG 24 或者 PNG 32 有先天存储体积小优势,所以它非常适合应用于图标、颜色简单或透明图像。...对比压缩前后 PNG 24 和 PNG 32 两者存储体积相差巨大,但是表现效果却相差无几,所以用于 web PNG 24 或 PNG 32 图像一定要记得压缩,这对于客户端性能优化将提供非常大帮助...比如下面这个这个图对比,右边是矢量图,左边是其他格式图片: ? svg SVG用途 SVG 在线条艺术,LOGO,图标,插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节复杂图片。...矢量编辑软件,如 Adobe Illustrator 和 Sketch 可能会到处含有非必要元素和属性 SVGSVG 压缩器可用于删除这种多余信息。

1.1K30

前端插件以及部分细分网址梳理

类似于 Solr, 但是用于浏览器全文搜索引擎,可以为 JSON 创建索引,离线也可以使用 jquery.hotkeys: jQuery 插件,用于绑定热键 breach_core: Javascript...: 自定义滚动条,让所有浏览器都显示一样滚动条 onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8 scrollMonitor: 前端插件用来监控元素滚动事件...IOS 7 Switch JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品富文本编辑器,简洁小巧 sensor.js: 在智能移动设备浏览器,通过HTML5...Sortable: 现代浏览器用于实现元素拖拽排序功能,支持 Meteor, AngularJS, React,不依赖 jQuery Swiper: 用于实现浏览器滑动切换效果,支持硬件加速 matter-js...友好支持, 并对不支持浏览器使用 cookie 优雅降级 angular-filter: 一组有用 Angular Filters bindonce: Angular 插件, 用于减少 Watcher

5.6K90

前端常用插件

: 用于 Javascript 中多行文本,类似于 Ruby HERE Doc screenfull.js: 全屏插件,支持各大浏览器 lunr.js: 类似于 Solr, 但是用于浏览器全文搜索引擎...onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8 scrollMonitor: 前端插件用来监控元素滚动事件(进入、退出等),性能很好 ScrollMagic... JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品富文本编辑器,简洁小巧 sensor.js: 在智能移动设备浏览器,通过HTML5api使用移动设备功能。...Sortable: 现代浏览器用于实现元素拖拽排序功能,支持 Meteor, AngularJS, React,不依赖 jQuery Swiper: 用于实现浏览器滑动切换效果,支持硬件加速 matter-js...版 Firefox jquery-mobile: jQuery 团队开发用于辅助手机端 web app 开发库,基于 HTML5 mobile-angular-ui: 基于angularjs和bootstarp

4.7K61

反思录:Angular实现svg和png图片下载

Angular编程基础,大概位于自己能独立定义component级别。...适用范围 svg被主流浏览器和svg阅读器支持,canvas只有主流浏览器支持; svg用于大面积渲染区域程序和静态文档,如google地图。canvas适合小范围图像密集型场景,如游戏。...获取元素 Angular中提供一种叫做ViewChild注解,可以帮助我们引用到页面中svg元素,此处就是#template....所以有种思路是将svg转换成canvas再转成png. canvas有个drawImage函数,可以将图片绘制到画布,该函数输入源是HTMLImageElement或者另外canvas元素。...永远从问题最近地方开始分析 不要用战术勤奋掩饰战略懒惰 我个人对Angular并不十分熟悉,在实现svg和png图片下载功能过程中遇到一些坑,这些坑有深有浅,深直接面向stackoverflow

2.7K40

前端图片优化机制

svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好放缩体验,需要动态控制图片特效 bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg需要极限优化场景...jpeg劣势: 它并不适合于线条绘图(drawing)和其他文字或图示(iconic)图形,因为它压缩方法用在这些图形型态,会得到不适结果; gif GIF(Graphics Interchange...劣势: DOM比正常图形慢,而且如果其结点多而杂,就更慢了 不适合网页游戏等;当然,我们可以结合 Canvas + SVG来实现 bpg http://bellard.org/bpg/ 图片画质比较...HEVC头部更小 支持4:2:2和4:2:0色值设置 BPG可以用于硬件支持HEVC编解码器 这种图片格式目前还没有被浏览器支持,需要js解码,但其优势非常明显 二、前端图片优化方案 使用...劣势:生成图片体积较大,减少请求个数同时也增加了图片大小,不合理拆分将不利于并行加载 使用css、svg、canvas或iconfont代替图片 css代替图片 场景:适用于移动端或较高级浏览器

3.1K01

前端图片优化机制

svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好放缩体验,需要动态控制图片特效 bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg需要极限优化场景...jpeg劣势: 它并不适合于线条绘图(drawing)和其他文字或图示(iconic)图形,因为它压缩方法用在这些图形型态,会得到不适结果; gif GIF(Graphics Interchange...劣势: DOM比正常图形慢,而且如果其结点多而杂,就更慢了 不适合网页游戏等;当然,我们可以结合 Canvas + SVG来实现 bpg http://bellard.org/bpg/ 图片画质比较...性能更好,因为BPG头部比HEVC头部更小 支持4:2:2和4:2:0色值设置 BPG可以用于硬件支持HEVC编解码器 这种图片格式目前还没有被浏览器支持,需要js解码,但其优势非常明显...劣势:生成图片体积较大,减少请求个数同时也增加了图片大小,不合理拆分将不利于并行加载 使用css、svg、canvas或iconfont代替图片 css代替图片 场景:适用于移动端或较高级浏览器

1.7K30

Angularjs SPA开发一些经验分享

3:注意一些特殊节点式angularjs directive,因为在IE7这是不被认识,因为IE严格XML模式。...6:controller应该只包含业务逻辑,对于数据模型格式化过滤尽量交给angular框架filter等处理。...12:scope纯净性,scope每一个函数和属性必须为view所用(事件传递或者属性绑定),不用可以作为工具函数或者service处置.  13:对controller之间如果不是强依赖,只是弱引用则最好用事件...最后想说说angularjs也不是银弹,并不是万能,不是所有的项目都适合应用,它适用于CRUD应用系统,内置了一些默认规则(惯例优先),对于表现层频繁交互项目不适用,对于一些特殊项目比如spring...hdiv项目也不是那么友好,或者就是你希望兼容更多IE8一下版本应用系统,同样也不实用。

1.3K10

前端高效开发必备 js 库梳理

设计保持完全一样, 体积只有2kb big.js 一个小型,快速JavaScript库,用于任意精度十进制算术运算 qs 一个 url参数转化 (parse和stringify)轻量级js库 dom... HTTP 库,可用在 Node.js 和浏览器发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+ Superagent 基于Ajax优化, 可以与 Node.js HTTP 客户端搭配使用...API, 同时还支持彩色动画、转换、循环、画架、SVG支持和滚动等效果 Vivus 一个零依赖JavaScript动画库,可以让我们用SVG制作动画,使其具有被绘制外观 GreenSock JS 一个...JavaScript动画库,用于创建高性能、零依赖、跨浏览器动画,已在超过400万个网站上使用, 并且可以在React、Vue、Angular项目中使用 Scroll Reveal 零依赖,为 web...至于像react或者vue这种框架相关生态, 笔者这里就不一一介绍了, 官网文档都有非常详细生态集, 感兴趣朋友自行了解即可.

1.8K10

史上最全前端资源大汇总

Angular JS ---- Angular.js 一些学习资源 angularjs中文社区 Angularjs源码学习 Angularjs源码学习 angular对bootstrap封装 angularjs...+ nodejs 吕大豹 Angularjs AngularJS 最佳实践 Angular一些扩展指令 Angular数据绑定原理 一些扩展Angular UI组件 Ember和AngularJS性能测试...underscrejs en api lodash - underscore代替品 ext4api qwrap手册 缓动函数 svg 中文参考 svg mdn参考 svg 导出 canvas svg...常用 ---- ieBetter.js(让IE6-IE8拥有IE9+,Chrome等浏览器特性) 模拟键盘 拼音 中国个人身份证号验证 35....简历模板 ---- 简历 张伦 简历 马斯特 张秋怡 翁天信 动画方式简历 组件丰富简历 haorooms博客 60. 求职 ---- 面试你之前,我希望在简历看到这些! 61.

13.4K61

网络图形标准

SVG 可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形一种图形格式。SVG 由 W3C 制定,是一个开放标准。...SVG 可以嵌入外部对象,比如文字、PNG、JPG,也可以嵌入外部 SVG。它在移动设备存在两个子版本,分别叫做 SVG Basic 和 SVG Tiny。 示例: <?...IE9 以下版本如果要支持 SVG,需要安装 Adobe 公司一个名为 Adobe SVG Viewer 插件,不过效果一定不如浏览器原生支持出色(只有 IE 原生不支持 SVG,浏览器中 IE...Canvas Canvas 标签是 HTML 标签之一,允许脚本动态渲染图像。开始由苹果推出,Safari 率先支持,IE 对 Canvas 支持可以通过诸多 JavaScript 库实现。...值得一提是,当前 SVG 和 VML 在浏览器支持度不同,使得诸多前端矢量图形库针对 IE 和非 IE 做了两套实现,保证在 IE 下用 VML 渲染,而其他浏览器中则用 VML 渲染,而对于 Canvas

71600

前端高效开发必备 js 库梳理

设计保持完全一样, 体积只有2kb big.js 一个小型,快速JavaScript库,用于任意精度十进制算术运算 qs 一个 url参数转化 (parse和stringify)轻量级js库 dom... HTTP 库,可用在 Node.js 和浏览器发起 HTTP 请求,支持所有现代浏览器,甚至包括 IE8+ Superagent 基于Ajax优化, 可以与 Node.js HTTP 客户端搭配使用...API, 同时还支持彩色动画、转换、循环、画架、SVG支持和滚动等效果 Vivus 一个零依赖JavaScript动画库,可以让我们用SVG制作动画,使其具有被绘制外观 GreenSock JS 一个...JavaScript动画库,用于创建高性能、零依赖、跨浏览器动画,已在超过400万个网站上使用, 并且可以在React、Vue、Angular项目中使用 Scroll Reveal 零依赖,为 web...至于像react或者vue这种框架相关生态, 笔者这里就不一一介绍了, 官网文档都有非常详细生态集, 感兴趣朋友自行了解即可.

2K30

前端大牛们都学过哪些东西?

及其全家桶 浅浅研究过算法 玩过一段时间动画开发 canvas、svg 单纯技术层面也就是上述那些个东西。...+ nodejs 吕大豹 Angularjs AngularJS 最佳实践 Angular一些扩展指令 Angular数据绑定原理 一些扩展Angular UI组件 Ember和AngularJS性能测试...lodash - underscore代替品 ext4api backbone 中文手册 qwrap手册 缓动函数 svg 中文参考 svg mdn参考 svg 导出 canvas svg 导出 png...Javascript 常用 ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性 模拟键盘 拼音 中国个人身份证号验证 算法 数据结构与算法 JavaScript 描述....——前端优化 毫秒必争,前端网页性能最佳实践 网站性能工具Yslow使用方法 前端工程与性能优化():静态资源版本更新与缓存 前端工程与性能优化(下):静态资源管理与模板框架 HTTPS连接前几毫秒发生了什么

5K30

移动端 Web 渲染解决方案

SVG 用来定义用于网络基于矢量图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸情况下其图形质量不会有所损失 PS:SVGIE9以及Firefox和chrome下都支持...设计师通过 AE 导入 svg 实际是“假svg 应为实际是动画通过 svg 设置,所有的静态图像都是 img 文件夹中 png 文件 Canvas (W3C) 同样,IE9之前浏览器都不支持...增强 Web 图形 SVG 作为图像格式 SVG 另外还常用于简单图像,无论是应用程序还是网页中图像,大图像还是小图像。...SVG 因此可以充当非常好图像替换格式,甚至对网页最简单图像也是如此。静态 WebApp/网页图像因此落在谱表 SVG 端。 ?...在浏览器性能(载入速度)SVG 更佳。

3.5K40
领券