首页
学习
活动
专区
工具
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.5K20

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

后来,自己在bootstrap的UI框架下,做了个实验,按照平常的习惯,写了个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 only的,SVG相关的我们暂不讨论。 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

    65620

    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 可能会到处含有非必要元素和属性的 SVG 。SVG 压缩器可用于删除这种多余的信息。

    1.2K30

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

    类似于 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.7K90

    前端常用插件

    : 用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc screenfull.js: 全屏插件,支持各大浏览器 lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎...onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好 ScrollMagic...的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器,简洁小巧 sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。...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

    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

    前端图片优化机制

    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.2K01

    前端图片优化机制

    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

    史上最全的前端资源大汇总

    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.5K61

    前端高效开发必备的 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.9K10

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

    及其全家桶 浅浅的研究过算法 玩过一段时间的动画开发 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

    前端高效开发必备的 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这种框架的相关生态, 笔者这里就不一一介绍了, 官网文档上都有非常详细的生态集, 感兴趣的朋友自行了解即可.

    2.1K30

    网络图形标准

    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

    74200

    移动端 Web 渲染解决方案

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

    3.6K40
    领券