Accessing a DOM object defined in an external SVG file

SVG standard allows to use and refer external SVG files.

I have a file circle.svg that defines a circle object with id "the_circle". From the main SVG file I am able to include this circle and animate it, using SVG linking.

I would also like to access the same circle object via javascript, how can I do this ? What is the javascript equivalent of xlink:href="url(#the_image)#the_circle" ?

Using document.getElementById('the_image') I can only access the SVGImageElement but not the objects defined inside the included SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

  <image 
    id="the_image"
    x="0" y="0"  width="100%" height="100%"
    xlink:href="circle.svg" />

  <animateTransform     
    xlink:href="url(#the_image)#the_circle"

    attributeName="transform" attributeType="XML"
    type="translate" 
    from="0" to="25"
    dur="1s" repeatCount="indefinite" 
    additive="replace" fill="freeze" />
</svg>