JavaScript动态改变svg文本内容

本文介绍如何使用两种方法在SVG文件中动态更新文本内容。通过获取SVG元素并替换其文本值,可以轻松实现交互式文本修改。

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

svg文件:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>

<text id="txt" x="65" y="70" style="font-size:12px;" fill="red">Hello</text>

</svg>


若想实现动态交互,text标签必须有初值(例:Hello)

方法一:

txt = svgDocument.getElementById("txt");
txt.firstChild.nodeValue="Hello World !";


方法二:

var txt=svgDocument.getElementById("txt");
var newText = svgDocument.createTextNode("Hello World !");
txt.replaceChild(newText,txt.firstChild);


注:方法二来自ibm developerworks,详细请参看http://www.ibm.com/developerworks/cn/xml/x-svgint/index.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值