SVG动态修改Text的文本

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());

}