svgElement在chrome中不起作用

Question

html标签

<svg  width="550px" height="300px">
    <g transform="translate(275, 150)"> 
        <circle id="mySquare" cx="0" cy="0" r="10" style=" fill: orange; />
    </g>
</svg>

js script

mySquare.currentTheta += 0.3;
mySquare.transform.baseVal.getItem(0).setRotate(mySquare.currentTheta, 0, 0);

此脚本在IE9中正常工作

但是在Chrome中，无法正常工作

chrome不支持svgElement？

Answer 1

之前使用类似getElementById()的内容来获取相应的元素：

var mySquare = document.getElementById( 'mySquare' );
mySquare.currentTheta += 0.3;
mySquare.transform.baseVal.getItem(0).setRotate(mySquare.currentTheta, 0, 0);

所有带有ID的元素都会获得带有该ID的全局变量的功能/错误在所有浏览器中都不存在。