我有一个 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。
最佳答案
getElementsByTagName
函数返回一个 NodeList
,而不是一个元素。尝试:
SVGRoot = document.getElementsByTagName("svg")[0];
关于javascript - SVG 嵌入到 HTML 中,拖放代码问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7870105/