Javascript displays Chinese writing on svg file

[fulio pen]

Hello:

I failed to display a Chinese character with javascript code in
following svg page:

http://www.pinyinology.com/test/hanzi2.svg

I guess that something is missing or wrong in the javascript code.
There is only one line of instruction in the javascript section, and
only one symbol to be displayed. But I simply cannot do it. The code
is as follows:

<?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 onload="chinText()" width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<script type='text/ecmascript'>
<![CDATA[
function chinText()
{
document.getElementById("moon").innerHTML ="\u6708"; //javascript
command
}
]]>
</script>

<text id="moon" x="128" y="150" style="fill:blue; font-family:times;
font-size:150%; font-weight:700; stroke:none;">Character fails to
appear here.</text> //svg tags for the character.

<text id="moon" x="128" y="200" style="fill:red; font-family:times;
font-size:150%; font-weight:600; stroke:none;">This character will
appear at 4 locations in this page.</text>
</svg>

I wish someone could help me.

javascript can display chinese ideographic words on svg page.
Following is an example:
http://www.pinyinology.com/test/characters.svg

Thanks for your expertise.
fulio pen

 

[Martin Honnen]

<svg onload="chinText()" width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<script type='text/ecmascript'>
<![CDATA[
function chinText()
{
document.getElementById("moon").innerHTML ="\u6708"; //javascript
command

Why do you think that inner_HTML_ would work when scripting SVG which is
XML and not HTML?

<text id="moon" x="128" y="150" style="fill:blue; font-family:times;
font-size:150%; font-weight:700; stroke:none;">Character fails to
appear here.</text> //svg tags for the character.

<text id="moon" x="128" y="200" style="fill:red; font-family:times;
font-size:150%; font-weight:600; stroke:none;">This character will
appear at 4 locations in this page.</text>
</svg>

And why do you have two elements with the same id attribute value
"moon"? That is not allowed, id values must be unique in the complete
document.

So get rid of the duplicated ids, then make sure you use the W3C DOM
Core methods e.g.
var textNode = document.createTextNode("\u6708");
someElement.appendChild(textNode);
to append that character to an element or if you know an element has as
its first child a text node then you can use
someElement.firstChild.nodeValue = "\u6708";

 

[fulio pen]

<svg  onload="chinText()" width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<script type='text/ecmascript'>
<![CDATA[
function chinText()
{
  document.getElementById("moon").innerHTML ="\u6708"; //javascript
command

Why do you think that inner_HTML_ would work when scripting SVG which is
XML and not HTML?

<text id="moon" x="128" y="150" style="fill:blue; font-family:times;
font-size:150%; font-weight:700; stroke:none;">Character fails to
appear here.</text> //svg tags for the character.

<text id="moon" x="128" y="200" style="fill:red; font-family:times;
font-size:150%; font-weight:600; stroke:none;">This character will
appear at 4 locations in this page.</text>
</svg>

And why do you have two elements with the same id attribute value
"moon"? That is not allowed, id values must be unique in the complete
document.

So get rid of the duplicated ids, then make sure you use the W3C DOM
Core methods e.g.
   var textNode = document.createTextNode("\u6708");
   someElement.appendChild(textNode);
to append that character to an element or if you know an element has as
its first child a text node then you can use
   someElement.firstChild.nodeValue = "\u6708";

Hi, Martin:

Thanks a lot for your help.

Fulio