JavaScript操作SVG的一些知识

前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。

虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但是在实际运用中还是因为这样那样的细微区别遇到了不大不小的麻烦。所以通过此篇文章记录下遇到的问题和解决的方法。

获取SVGDocument

当使用JavaScript在页面上对HTML进行操作的使用，一个非常重要的对象就是document了。无论是getElementById、getElementsByTagName，异或是createElement，它们都是document对象上的方法。而且所有其它任何DOM对象都被包含在该对象之内。

一般而言，一个HTML文件，或者说一个网页都对应一个document对象，所以如果SVG是直接嵌套在HTML的内容中的话，它们就会共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象。

比如下边的代表，在浏览器上打开，就会看到一个蓝色的圈而非绿色的圈，因为JavaScript通过document获得了circle对象，并重新设置了其fill属性。