用js在页面中创建svg标签不显示的问题

问题描述

直接在页面写入SVG,图形正常可以显示，
但是使用js动态创建SVG，添加入DOM节点，页面无法显示SVG图形

原因

SVG是基于XML格式定义图像的一种技术，因此创建节点的时候，需要指定命名空间（Namespace），也就是用createElementNS来代替createElement创建节点

封装的js创建svg的方法

思路如下：

1、通过document.getElementById根据元素ID来获取这个容器对象
2、使用document.createElementNS创建一个带http://www.w3.org/2000/svg命名空间的矩形对象
3、使用element.setAttribute设置这个矩形对象的属性
4、使用element.appendChild把它添加到容器里

封装方法如下：

/*
* tag：所要创建的标签名称
* attrs: 所需要添加的属性，｛key:val,key:val｝
*/
function makeSVG(tag, attrs) {const ns = 'http://www.w3.org/2000/svg';const xlinkns = 'http://www.w3.org/1999/xlink';let el= document.createElementNS(ns, tag);if (tag==='svg'){el.setAttribute('xmlns:xlink', xlinkns);}for (let k in attrs) {if (k === 'xlink:href') {el.setAttributeNS(xlinkns, k, attrs[k]);} else {el.setAttribute(k, attrs[k]);}}return el;
}

测试调用

window.addEventListener('load', function(){const svgtest = document.getElementsByTagName('body')[0];let svg = makeSVG('svg');let g = makeSVG('g');let rect = makeSVG('rect',{x:'0',y:'0',width:'100%',height:'100%',fill:'red'});g.appendChild(rect);svg.appendChild(g);svgtest.appendChild(svg);});

svg调整层级

1、svg默认的层级关系：
SVG是按元素的书写顺序进行堆叠的，就是说后面的元素会叠在前面的元素上

2、js获取所有svg下的节点，再根据需要展示的顺序，调整节点顺序。
（参考链接：https://blog.csdn.net/happyduoduo1/article/details/51789552/）

参考链接：https://segmentfault.com/a/1190000022013374

用js在页面中创建svg标签不显示的问题相关推荐

使用Vue.js在WordPress中创建单页面应用SPA
吐槽一下,掘金好像并不能插入gist的代码框效果有点打折扣博客原文地址里有gist代码: 使用Vue.js在WordPress中创建单页面应用SPA 英文原文地址:premium.wpmudev. ...
js如何在浏览器中运行php文件下载,JavaScript_用JS在浏览器中创建下载文件，但受限于浏览器，很多情况下 - phpStudy...
用JS在浏览器中创建下载文件但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: file.js 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件 ...
JSP页面中使用JSTL标签出现无法解析问题解决办法
JSP页面中使用JSTL标签出现无法解析问题解决办法参考文章: (1)JSP页面中使用JSTL标签出现无法解析问题解决办法 (2)https://www.cnblogs.com/xdp-gacl/p ...
Nutch 使用metadata plugin捕获页面中的meta标签数据
Nutch 使用metadata plugin捕获页面中的meta标签数据添加index-metadata和parse-metatags 要使用Nutch的插件,就需要在conf/nutch-sit ...
织梦直接写php标签,怎么在自己的php页面中使用dedecms标签
怎么在自己的php页面中使用dedecms标签? 这篇文章主要介绍了在自己的php页面中使用dedecms标签的代码示例,需要的朋友可以参考下推荐学习:织梦cms 第一步:外部php页面中加入如下代 ...
找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置script元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分...
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分最常用的方式是在页 ...
jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结
转载自 jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结为什么使用该功能? 项目中的每个页面都包含产品名称.Logo.版本等信息,我希望修改一处,其它所有的全部跟着变 ...
iframe标签中写html,html页面中嵌套iframe标签，我们可以用html中的iframe标签搞定
iframe嵌入网页的用法 iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. 也应该是框架的一种形式,它与不 ...
【打开方式问题解决】该文件没有与之关联的应用来执行该操作。请安装应用，若已经安装应用，请在“默认应用设置“页面中创建关联。
问题描述最近用了某款编辑右键菜单工具,清理了下冗长的右键内容,但是却出现了另一个奇奇怪怪的问题,就是对某一类型文件,在右键后,点击[打开方式]->[选择其他应用],会弹出[该文件没有与之关联的 ...

用js在页面中创建svg标签不显示的问题

问题描述

原因

封装的js创建svg的方法

svg调整层级

用js在页面中创建svg标签不显示的问题相关推荐

最新文章

热门文章