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

无法在IE中更改SVG innerHTML

问题:无法在IE中更改SVG innerHTML

答案:在Internet Explorer(IE)浏览器中,无法直接使用innerHTML属性来更改SVG元素的内容。这是因为IE浏览器对SVG的支持较弱,不支持innerHTML属性用于SVG元素。

要在IE中更改SVG元素的内容,可以使用以下两种方法之一:

  1. 使用DOM操作:可以使用JavaScript中的DOM方法来更改SVG元素的内容。例如,可以使用createElementNS方法创建新的SVG元素,然后使用appendChild方法将其添加到SVG容器中。可以使用setAttribute方法设置元素的属性,使用createTextNode方法创建文本节点,并使用appendChild方法将其添加到SVG元素中。

示例代码:

代码语言:txt
复制
var svg = document.getElementById("svg-container");
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", "50");
rect.setAttribute("y", "50");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "red");
svg.appendChild(rect);
  1. 使用SVG库:可以使用一些专门用于处理SVG的JavaScript库,如D3.js、Snap.svg等。这些库提供了更方便的方法来创建、修改和操作SVG元素。

示例代码(使用Snap.svg库):

代码语言:txt
复制
var svg = Snap("#svg-container");
var rect = svg.rect(50, 50, 100, 100);
rect.attr({
  fill: "red"
});

以上是在IE浏览器中更改SVG元素内容的两种常用方法。根据具体需求和项目情况,选择适合的方法来操作SVG元素。

推荐的腾讯云相关产品:腾讯云提供了一系列云计算相关产品,包括云服务器、云数据库、云存储等。这些产品可以帮助用户在云端部署和管理应用程序,提供稳定可靠的云计算基础设施支持。

  • 腾讯云服务器(CVM):提供弹性、安全、高性能的云服务器实例,可满足不同规模和需求的应用部署和运行。 产品介绍链接:腾讯云服务器
  • 腾讯云数据库(TencentDB):提供多种类型的云数据库服务,包括关系型数据库(MySQL、SQL Server等)和NoSQL数据库(MongoDB、Redis等),可满足不同应用场景的数据存储和管理需求。 产品介绍链接:腾讯云数据库
  • 腾讯云对象存储(COS):提供安全、可靠、低成本的云存储服务,适用于存储和管理各种类型的非结构化数据,如图片、音视频文件、日志等。 产品介绍链接:腾讯云对象存储

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

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

相关·内容

iconfont Symbol svg引入无法更改颜色

新项目这边使用svg方式引入图标。有一个地方的图标有两种状态:选中与非选中。...按照以前我使用font-face的方式,设计只需要传一套,我这边改颜色,既然很多大佬(比如:张鑫旭)都说SVG Sprites比font-face高几层楼,那肯定也支持颜色更改吧。...这不我就刷到了张大佬的svg图标更改颜色,讲得通俗易懂,十分全面。 外部交涉 我试了所有方式,都没成功。好家伙,时间紧,任务重。也就不想纠结原因了,然后就想着找设计要两套吧。...发生了以下对话: 设计:你怎么又改不了 我: 这边是用的svg那种呀,改不了 设计:自己下回多去试试 设计:别个都行,你不行 交涉ing.......所以阿里图标库随便添加几个,下载项目。 对比两个图标的path 原因 所以还是svg生成的时候设置了fill属性,导致无法更改颜色。修改方法,需要设计那边上传单色图标。

3.5K30
  • ALMwin7IE8下无法浏览

    安装完ALM后,用IE8打开查看,没有登录界面,提示需要安装东西。...按照提示安装,没有响应,然后到网上查了一下资料: ALM/QC11.0win8/IE11下无法浏览 页面显示要求安装插件,安装ALM-Platform Loader 11.msi 失败,提示 cannot...解决方法:1、IE11的Internet选项-高级证书地址不匹配发生警告、证书是否已吊销均取消勾选2、再到兼容性视图设置,把QC11访问的地址添加到已添加到兼容性视图中的网站3、右键IE11图标选择以管理员身份打开...通过上面三步我自己win8系统+IE11是成功登录了。...但是没有解决我的问题 后来换了一下IE32位,重新打开,竟然就成功了,IE32一般都是自带的,不用安装,路径是:C:\Program Files (x86)\Internet Explorer

    1.1K50

    vueIE无法正常工作,Promise未定义?

    用vue写了一个日历组件,Firefox、Edge、Chrome以及360等浏览器极速模式运行一切正常,如图: 但在IE和360等浏览器的兼容模式下却显示了模板,看起来像乱码一样,如图: 按F12...左思右想,突然灵光一闪,ES5的函数声明并不能为形参赋默认值,这种写法是ES6新增的,而IE是不兼容ES6的,那就把代码改一改,这里不再赋默认值,为了让方法可以正确执行而不报错,调用这个方法的地方都强制传参就好了...下继续使用`find`方法,那就需要为ES5扩展`find`方法,否则IE就会报出如图所示的错误: 扩展`find`方法的代码如下: if (!...`es6-promise`项目[github地址](https://github.com/stefanpenner/es6-promise) 现在,这个组件终于可以IE上正常展示了!...VUE: 1 / 1 vueIE无法正常工作,Promise未定义?

    4.2K20

    kbone 实现小程序 svg 渲染

    语法树转换终究是不可靠的—— Wepy 和 Taro 的使用,我们常常会碰到很多语法无法识别的坑,坑的数量与代码量成正比。因此,这些框架更适用于从零开始写,而不适合将一个大型项目移植到小程序。... Android 和 iOS 真机调试,本例没有出现无法显示的兼容问题,这也说明了这种方案可行。...例如,解析 SVG 的过程,我们可能希望通过获取 SVG 元素的尺寸来设置渲染后背景图的默认尺寸(像 那样),同时允许来自业务代码的尺寸覆盖,这在 kbone 环境下,甚至也许小程序架构是不可能的...同理,可以肯定的是,我们也无法 JS 控制诸如媒体查询、字体定义、动画定义、以及 ::before、::after 伪元素的展示行为等,这些都是只能通过静态 WXSS 编译到小程序包内,而无法通过小程序...视图层向微信 JSSDK 请求该 SVG 文件的过程,也许因为没有收到 Content-Type 或者收到的 Content-Type 不对,导致 SVG 文件无法被正确解析展示出来。

    2.1K00

    消除图片在ie缓存而无法更新的问题

    程序图片是动态显示的原先把打算把图片保存在服务器端然后显示可是由于ie的缓存问题导致图片无法实时更网络 程序图片是动态显示的...原先把打算把图片保存在服务器端然后显示 可是由于ie的缓存问题导致图片无法实时更新显示 所以改为把图片存在session然后再显示 需要保存的时候再保存到本地 //--------------chart.ashx.cs...WebApplication3.ChartHandler" codebehind="chart.ashx.cs" %> //WebApplication3为命名空间 //ChartHandler为chart.ashx.cs类的名字...  //--------------调用说明----------------- //需要把图片存到byte数组 假设为byteArr  则    // ------------------------

    86820

    Android--SVG安卓系统的应用

    SVG,即Scalable Vector Graphics 可伸缩矢量图形,这种图像格式在前端已经使用的非常广泛了 SVG图片相对于一般的图片(png、jpg等),拥有占用体积小,支持等比例缩放不失真...,性能高等优势,谷歌Android5.0引进了SVG,并转化为Vector,Android中指的是Vector Drawable,也就是Android的矢量图,可以说Vector就是Android...SVG实现(并不是支持全部的SVG语法,现已支持的完全足够用了) Vector图像刚发布的时候,是只支持Android 5.0+的,自从AppCompat 23.2之后,Vector可以使用于Android...Vector 语法简介 通过使用它的Path标签,几乎可以实现SVG的其它所有标签,虽然可能会复杂一点,但这些东西都是可以通过工具来完成的,所以,不用担心写起来会很复杂。...添加 defaultConfig { vectorDrawables.useSupportLibrary = true } 1.2、gradle添加 compile

    2.8K20

    小程序 SVG 的打开方式

    +xml" data="image.svg">第三种,是直接把svg内容,通过标签嵌入至网页,也就是说,svg的数据内容直接是当前网页的一部分,浏览器是加载当前网页时直接解释渲染的...和方式下,svg数据都是“封装”各自的文件载体下,不用担心其中数据与当前网页的其他内容冲突(例如里面的ID、Class和其他svg图形Element的ID、Class重复...HTML注入SVG用XML语法和格式描述矢量,XML无法直接引用HTML。...控制SVG引入加载的方式如前文所述,标准浏览器,起码有四种方式加载SVG资源(加上和的话,实际上有6种可能,但这两种都不推荐使用,可以排除)。...FinClip小程序SVG的打开方式小程序里成功使用SVG的诀窍在于这几处。

    2K40

     IE和FireFox显示不一致

    https://blog.csdn.net/huyuyang6688/article/details/38704045  IE和FireFox显示不一致         在做新闻发布系统后台登陆界面时...于是代码中加了两个“ ”,FireFox达到预期效果了: ?         我们都知道,一个“ ”为一个字符大小。...可我明明已经“密码”二字中间添加了两个“ ”了,刚好为一个汉字的间距。但是IE浏览器测试的结果,“密码”二字中间的间距仍然很小(大约只有一个字符的大小)。...我继续添加“ ”,IE“密码”二字中间的间距不变,还是大约只有一个字符的大小,无论添加多少个 标记,好像最对只显示一个空格;而FireFox则乖乖地如数显示出所添加的空格长度。...解决方法:         知道了原因,解决方法也非常简单: 第一种方法:代码为有关区块的字设置字体即可,比如这里将上述需要格式化的“密  码”的字体设置为宋体:          font-family

    1.3K30
    领券