Question

I have an SVG file embedded into an HTML document inside . I can javascript access the elements in the html and svg using ids and classes. However, I want to perform some drag and drop on the embedded svg. I have been using the following example at http://svg-whiz.com/svg/DragAndDrop.svg separating the SVG from the javascript, but it gives me trouble when I embed the SVG in HTML. The init function in the SVG doesn’t work when embedded

onload="initSVG(evt)"

I need to access the root of the SVG in the HTML so that I can get the drag and drop routines working. The original code for a standalone svg is written thus:

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

My rewrite is like such, so that it can be run without an onload event call:

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

Which gives the the error: “Object # has no method ‘CreateSVGPoint'”. So it doesn’t seem to be treating the imported SVG in the same way as a stand alone svg. How can I get the SVGRoot?

Thanks!

P.S. I know i should probably be using jquery, but I wanted to learn raw DOM.

Answer 1

The getElementsByTagName function returns a NodeList, not an element. Try:

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