Accéder à un objet DOM défini dans un fichier SVG externe

Il semble que le "droit" de faire cela serait effectivement d'utiliser un élément "Utiliser" SVG plutôt qu'une image. La raison en est que l'interface DOM de l'élément d'utilisation SVG spécifie une propriété "INSTANCEROOT", qui vous permet d'obtenir la racine de "l'arborescence d'instance" correspondant à cet élément d'utilisation: http://www.w3.org/tr/svg/truct.html#interfacesVGuseElement

Alors, vous se retrouverait avec une solution qui ressemble à quelque chose comme ce qui suit: cercle.svg: p> xxx pré>

document utilise le nœud racine SVG du cercle.svg: p> xxx pré>

malheureusement, cependant, Alors que Firefox prend en charge l'utilisation de l'élément d'utilisation avec des documents externes, il y a actuellement un bogue dans WebKit qui ne permet pas cela: https://bugs.webkit.org/show_bug.cgi?id=12499 P>

En outre, Firefox ne semble pas implémenter la propriété Instanceroot pour une utilisation des éléments d'utilisation. P>

Donc, il semble que vous devriez peut-être travailler autour des limitations des implémentations SVG actuelles. La façon dont je recommanderais de faire cela est d'utiliser XMLHTTPQUEST pour télécharger le document sur lequel vous souhaitez créer un lien et importer le DOM du document téléchargé dans le document de votre document hôte. Le code suivant implémente cela et fonctionne dans Firefox, Opera et Chromium: P>

<?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%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <script>
    function fetchXML  (url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function (evt) {
        //Do not explicitly handle errors, those should be
        //visible via console output in the browser.
        if (xhr.readyState === 4) {
            callback(xhr.responseXML);
        }
        };
        xhr.send(null);
    };

    //fetch the document
    fetchXML("http://localhost:8082/tmp/circle.svg",function(newSVGDoc){
        //import it into the current DOM
        var n = document.importNode(newSVGDoc.documentElement,true);
        document.documentElement.appendChild(n);

        var circle = document.getElementById("the_circle"); //now you have the circle
    }) 
    </script>
</svg>

Pour compléter l'excellente solution de @ Echo-Flow avec le code dans JQuery / Coffetscript:

  $.get '/assets/hexagon.svg', (svgFileData)->
    svgTag = svgFileData.documentElement
    $('body').append(svgTag)
    circle = $('#the_circle')

Vous pouvez accéder à l'élément nécessaire un peu plus facilement: xxx

voir Cette image pour référence (prise sur dev.opera.com )