javascript - SVG 嵌入到 HTML 中，拖放代码问题

Question

我有一个 SVG 文件嵌入到 HTML 文档中。我可以使用 id 和类使用 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？

谢谢!

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

Answer 1

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

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