js创建svg元素并插入到html中使用createElementNS

w3school中对svg的描述：https://www.w3school.com.cn/svg/svg_intro.asp
因其特殊性，使用一般的document.createElement(‘svg’)创建的svg在插入到html节点中无法正常显示尺寸。
需要使用document.createElementNS(‘http://www.w3.org/2000/svg’,‘svg’)创建的svg在插入到html节点中可以正常显示对其设置的宽高。
createElementNS的两个参数，第一个参数是svg的命名空间URI。
创建封装的方法
/*

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;
}

可参考：https://blog.csdn.net/yiyueqinghui/article/details/108004272

js创建svg元素并插入到html中使用createElementNS相关推荐

js读取html元素scr,了解一下JavaScript中的DOM编程
如何在HTML中使用JavaScript 元素元素用于在HTML页面中嵌入或引入JavaScript脚本代码.该元素默认被定义在元素中 1.type:该属性定义script元素包含或src引入的脚 ...
js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...
用js在页面中创建svg标签不显示的问题
问题描述直接在页面写入SVG,图形正常可以显示, 但是使用js动态创建SVG,添加入DOM节点,页面无法显示SVG图形原因 SVG是基于XML格式定义图像的一种技术,因此创建节点的时候,需要指定命 ...
js动态创建input元素并自动获取焦点
input元素不会自动获取焦点代码如下: <div><h2>js创建input元素并自动聚焦</h2></div><script> let ...
[JS]笔记18_AJAX2_iframe元素AJAX跨域JSONP跨域
1.iframe元素 iframe元素会创建包含另外一个文档的内联框架常用属性: frameborder属性规定是否显示框架周围的边框值:0/1 src属性规定要显示的文档的URL 可是:html ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...
Study JavaScript《JS操作SVG的一些知识》
前阵子学习了一下SVG(Scalable Vector Graphics),希望能借此弥补自己在图形艺术上的不足,当然最后也没有得到什么提高,不过也扩充了一些网页前段技术知识.通过做了一些小的设计项目 ...
php在指定html元素中输出,如何从PHP中的数组输出html svg元素？
我有svg元素的数组.我必须从列出的阵列中打印出来.我试图打印它,但它不工作.请指导我如何获取浏览器上呈现的svg元素. actualy有阵列中的其他项目我没有表现出bcoz的字符限制如何通过SVG标 ...
svg元素标签增加、移除class名
svg元素标签不支持jquery中addClass().removeClass()方法解决方法 $.fn.addSvgClass = function(className) {return thi ...

js创建svg元素并插入到html中使用createElementNS

js创建svg元素并插入到html中使用createElementNS相关推荐

最新文章

热门文章