动态创建svg要注意的地方

下面是一个动态创建svg例子的一个片断

var svg = document.createElement('svg');
var polygon = document.createElement( 'polygon');
polygon.setAttribute('points', '100,10 40,180 190,60 10,60 160,180');
polygon.setAttribute('style', 'fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;');
svg.appendChild(polygon);

悲剧的是，浏览器并不买账，它竟然不显示。原因出在哪里呢？动态创建html并没有这个问题啊。
实际上改成下面这个样子就可以了

var svg = document.createElementNS(‘http://', svg');
var polygon = document.createElementNS(’http://', polygon');
polygon.setAttribute('points', '100,10 40,180 190,60 10,60 160,180');
polygon.setAttribute('style', 'fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;');
svg.appendChild(polygon);

就是在创建的时候，使用createElementNS，而不是createElement，还真是有点啰嗦。