Question

在svg中用js创建新元素并添加成功，却无法显示（SVG开发实践）

书上原原本本的例子，也运行出错！！！《SVG开发实践》
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg width="640" height="480" version="1.1" onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
function alertMsg(evt){
objet=evt.target;
large=objet.getAttribute('width');
alert('width of the rectangle is:'+evt.target.getAttribute('width'));
}
function init(evt){
svgdoc=evt.target.ownerDocument;
node=svgdoc.createElement('rect'); //----------①------------//
node.setAttribute('x','50');
node.setAttribute('y','50');
node.setAttribute('width','100');
node.setAttribute('height','50');
node.setAttribute('style','fill:red');
node.addEventListener('mousemove',alertMsg,false);
group=svgdoc.getElementById('group');
group.appendChild(node); //----------②------------//
}
]]></script>
<g id="group">
<text x="100" y="20" style="text-anchor:middle;font-size:15;fill:red;">Click the rectangle</text>
</g>
</svg>

补充：为什么 ②处的“group.appendChild(node)”已经把节点添加进去了，但是就是无法显示出来？有一种说法是①要改成“node=svgdoc.createElementNS('http://www.w3.org/2000/svg','rect')”，但是改后还是没有效果。

Answer 1

首先1处改成node=svgdoc.createElementNS('http://www.w3.org/2000/svg', 'rect');是必须的，这样才能创建一个svgRect元素。
其次，IE8不支持svg。IE9以上在运行这个文件的时候会屏蔽动态内容，在页面下方会有提示，点击允许就行了。火狐和chrome可以直接运行这个文件。

追问

很神奇的是，改了①处那句，效果出来了！！！
昨天我试了无数次，并且也修改过①处的，而且我一直用的谷歌浏览器来测试的，家里，公司都测试过好多次，都不行。。。