SVG嵌入HTML，拖放代码问题

Question

我有一个嵌入到 HTML 文档中的 SVG 文件。我可以使用 ids 和类通过 javascript 访问 html 和 svg 中的元素。但是，我想对嵌入的 svg 执行一些拖放操作。我一直在 http://svg-whiz.com/svg/DragAndDrop.svg 使用以下示例 将 SVG 与 javascript 分开，但是当我将 SVG 嵌入 HTML 中时，它给我带来了麻烦。 SVG 中的 init 函数在嵌入时不起作用

onload="initSVG(evt)"

我需要访问 HTML 中 SVG 的根目录，以便拖放例程正常工作。独立 svg 的原始代码是这样编写的：

function initSVG(evt)
{
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
}

我的重写是这样的，以便它可以在没有 onload 事件调用的情况下运行：

function initSVG()
{
SVGRoot = document.getElementsByTagName("svg");
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
}

这给出了错误：“Object # has no method 'CreateSVGPoint'”。所以它似乎没有像对待独立的 svg 那样对待导入的 SVG。如何获取 SVGRoot？

谢谢！

PS 我知道我可能应该使用 jquery，但我想学习原始 DOM。

Answer 1

getElementsByTagName 函数返回一个 NodeList，而不是一个元素。尝试：

SVGRoot = document.getElementsByTagName("svg")[0];