Comment accéder aux éléments SVG avec Javascript

Question

Comment accéder aux éléments SVG avec Javascript

Demandé el 2 de Mai, 2010: Quand la question a-t-elle été
36488 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis de déconner avec le SVG et j'espérais que je pourrais créer des fichiers SVG dans Illustrator et accéder à des éléments avec Javascript.

Voici le fichier SVG Illustrator coup (Il semble également ajouter une charge de ferraille au début du fichier que j'ai supprimé)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
     xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
    c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
    L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
    l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
    l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909 
    194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983 
    163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
    l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
    l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>

Comme vous pouvez probablement voir, chaque élément a un ID, et j'espérais être en mesure d'accéder aux éléments individuels avec Javascript afin que je puisse modifier le Remplissage d'attributs et de répondre à des événements tels que le clic.

Le HTML est de la tourbière de base

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>

    </body>
</html>

Je suppose que c'est deux questions vraiment.

a) Est-il possible de faire de cette façon, plutôt que d'utiliser quelque chose comme Raphaël ou jQuery SVG.

b) S'il est possible, quelle est la technique?

::Mise JOUR::

Pour le moment, j'ai eu recours à l'aide d'Illustrator pour créer le fichier SVG, et je suis en utilisant Raphael JS pour créer des chemins d'accès et tout simplement de copier le point de données à partir du fichier SVG et le coller dans path() fonction. La création des voies complexes comme pourrait l'être pour une carte, en codant les données de point manuellement à l'est (à ma connaissance) une opération extrêmement complexe.

Demandé el 2 de Mai, 2010 par gargantaun

Answer 1

2 Réponses

Answer 2

129voto

jbeard4 Points 5680

a) Est-il possible de faire de cette façon, plutôt que d'utiliser quelque chose comme Raphaël ou jQuery SVG.

Certainement.

b) S'il est possible, quelle est la technique?

Cette annoté l'extrait de code fonctionne:

<!DOCTYPE html>
<html>
    <head>
        <title>SVG Illustrator Test</title> 
    </head>
    <body>

        <object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
    <script>
        var a = document.getElementById("alphasvg");

        //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
        a.addEventListener("load",function(){
            var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
            var delta = svgDoc.getElementById("delta"); //get the inner element by id
            delta.addEventListener("mousedown",function(){alert('hello world!')},false);    //add behaviour
        },false);
    </script>

    </body>
</html>

Notez qu'une limitation de cette technique est qu'elle est limitée par la même la politique de l'origine, de sorte alpha.svg doit être hébergé sur le même domaine que le fichier html, sinon l'intérieur DOM de l'objet sera inaccessible.

Répondu el 31 de Juillet, 2010 par jbeard4 (5680 Points )

Answer 3

21voto

jediz Points 144

Dans le cas où vous utilisez jQuery, vous devez attendre pour $(window).charge, parce que l'embedded document SVG peut-être pas encore chargé à $(document).prêt

    $(window).load(function () {
        //alert("Document loaded, including graphics and embedded documents (like SVG)");
        var a = document.getElementById("alphasvg");
        var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
        var delta = svgDoc.getElementById("delta"); //get the inner element by id
        delta.addEventListener("mousedown",function(){alert('hello world!')},false);
    });

Répondu el 1 de Mai, 2011 par jediz (144 Points )

Comment accéder aux éléments SVG avec Javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment accéder aux éléments SVG avec Javascript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: