Блог

У меня есть SVG-файл, встроенный в HTML-документ внутри. Я могу получить доступ к элементам javascript в html и svg, используя идентификаторы и классы. Тем не менее, я хочу выполнить некоторое перетаскивание встроенного svg. Я использовал следующий пример в http://svg-whiz.com/svg/DragAndDrop.svg отделяя SVG от javascript, но это доставляет мне проблемы, когда я встраиваю SVG в HTML. Функция инициализации в SVG не работает при внедрении

 onload="initSVG(evt)"
 

Мне нужно получить доступ к корню SVG в HTML, чтобы я мог заставить работать процедуры перетаскивания. Исходный код для автономного 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();
}
 

Что выдает ошибку: «Объект # не имеет метода ‘CreateSVGPoint'». Похоже, что импортированный SVG не обрабатывается так же, как отдельный svg. Как я могу получить SVGRoot?

Спасибо!

PS Я знаю, что, вероятно, мне следует использовать jquery, но я хотел изучить raw DOM.

getElementsByTagName Функция возвращает a NodeList , а не элемент. Попробуйте:

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