svg交互的

这篇文章是《在 SVG 中添加交互性》

https://www.ibm.com/developerworks/cn/xml/x-svgint/#author

大致算是svg的入门，其实和普通的dom还是比较像的，用js来交互dom。

参考资料：

针对本文的一些内容进行改进 谷歌浏览器内核，有点翻旧账了的感觉

1.svgDocument  

如果svg是嵌入在网页里面的话，改成document,因为

 When an ‘svg’ element is embedded inline as a component of a document from another namespace, such as when an ‘svg’ element is embedded inline within an XHTML document [XHTML], then an SVGDocument object will not exist; instead, the root object in the document object hierarchy will be a Document object of a different type, such as an HTMLDocument object.


However, an SVGDocument object will indeed exist when the root element of the XML document hierarchy is an ‘svg’ element, such as when viewing a stand-alone SVG file (i.e., a file with MIME type "image/svg+xml"). In this case, the SVGDocument object will be the root object of the document object model hierarchy.


In the case where an SVG document is embedded by reference, such as when an XHTML document has an ‘object’ element whose ‘href’ attribute references an SVG document (i.e., a document whose MIME type is "image/svg+xml" and whose root element is thus an ‘svg’ element), there will exist two distinct DOM hierarchies. The first DOM hierarchy will be for the referencing document (e.g., an XHTML document). The second DOM hierarchy will be for the referenced SVG document. In this second DOM hierarchy, the root object of the document object model hierarchy is an SVGDocument object.

我就不翻译了

2.清单7的代码修改

function changeText(evt)
{ //根本没有svgDocument这个变量
//alert();
   targetXtext=document.getElementById("XPos");
   targetYtext=document.getElementById("YPos");
    //
   var XPos = evt.clientX;
   
   var YPos = evt.clientY;
   var newXPosText = document.createTextNode("X Position : " + XPos);
   var newYPosText = document.createTextNode("Y Position : " + YPos);
   targetXtext.replaceChild(newXPosText,targetXtext.firstChild);
   
   targetYtext.replaceChild(newYPosText,targetYtext.firstChild);

}