SVG动态修改Text的文本
来源:互联网 发布:苏州大学知乎 编辑:程序博客网 时间:2024/06/05 22:56
SVG Text的文本由于不是他的属性,因此不能采用setAttribute来更改。
下面说两种不同方式实现:
1、通过改变他的textContent
例如:svg内容如下,但是非常遗憾这种方法不适合IE6。Opera10是可以的
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onload="init()">
<script>
<![CDATA[
var text, textnode
function init()
{
textnode = document.getElementById("text1")
}
function changeText()
{
text = textnode.textContent
textnode.textContent = "test"
}
function restoreText()
{
textnode.textContent = text
}
]]>
</script>
<text id="text1" x="300" y="200" font-size="60" font-family="tempus sans itc" stroke="red" stroke-width="2" onmouseover="changeText()" onmouseout="restoreText()">
OMG
</text>
</svg>
2、第二种方法创建一个新的TextSpan替换旧的经过在IE6下测试好用。其他的浏览器没有试过
例如:下面是主要函数
function changeDescriptionText(evt,siteNum)
{
var newDescriptionText = svgDocument.createTextNode("Click here to goto DeveloperWorks.");
targetText.replaceChild(newDescriptionText,targetText.getFirstChild());
}
- SVG动态修改Text的文本
- SVG动态修改Text的文本
- svg 动态修改text文本
- SVG 文本(text)
- SVG 文本(text)
- svg 创建文本 create text
- JavaScript 实现动态修改 SVG
- svg -> text文本水平、垂直居中。文本垂直对齐方式
- svg中动态更改text属性值
- svg:text属性的可见性的修改(待解决问题)
- 修改系统DATA ELEMENT的文本 Text Enhancement
- 修改Vivado的文本编辑器为Sublime Text 3
- 文本的text-overflow
- SVG文本
- Ext动态修改girdPanel上的ToolBar的Text
- CSS3 SVG 构建的创意文本GRAPHICS
- svg文本动态改变后字体设置丢失问题
- [HTML5-SVG]JavaScript 的新领域 - 动态图片处理(SVG)
- S3C2440--串口乱码解决办法
- 指针数组与指向指针的指针
- 如何禁止linux文件系统缓存
- JAVA利用JDBC访问sql server 2000
- 卡片布局CardLaypoutTest
- SVG动态修改Text的文本
- 一些重要的算法
- 挂接命令(mount)
- Eclipse-sdcc学习(fedoar 14)
- 函数调用约定
- Linux内存管理之slab分配器分析(续四)
- 最近常用的linux命令 持续增加ing
- Live Writer 如何配置 CSDN
- Java 并发核心编程