Find, Create and Manage SVG Element

最新推荐文章于 2021-06-23 17:28:10 发布

aemon

最新推荐文章于 2021-06-23 17:28:10 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏： SVG with JavaScript 文章标签： IE

本文链接：https://blog.youkuaiyun.com/aemon/article/details/83874552

SVG with JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript操作SVG中的tspan元素，包括获取元素、设置文本内容、创建文本及tspan元素、设置点击事件及xlink:href属性等常用操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Just list some frequence usage
------------------------------
tspan:
[*] Get by type: var tspans = document.getElementsByTagName("tspan");
[*] Get text: var text= tspan.firstChild.nodeValue;
[*] Create text:

var txt=document.createElementNS('http://www.w3.org/2000/svg','text'); 
var tspan=document.createElementNS('http://www.w3.org/2000/svg','tspan'); 
var tnode = document.createTextNode("This is the text");
tspan.appendChild(tnode);
txt.appendChild(tspan);

[*] onclick: tspan.setAttribute("onclick", "alert(this.id)");
// TODO: this code does not work in IE.

xlink:href:
[*]Set href attr:

var bg = document.getElementById("ImageId");
var svgNS="http://www.w3.org/2000/svg";
var xlinkNS="http://www.w3.org/1999/xlink";
bg.setAttributeNS(xlinkNS,"href","I.png");