web-dev-qa-db-fra.com

Comment utiliser jquery en SVG (Scalable Vector Graphics)?

J'ai intégré SVG dans mon fichier php pour afficher une carte. Je veux utiliser jquery dessus, mais je n'ai aucune idée sur la façon de lier jquery dedans. J'espère que quelqu'un a déjà fait une telle chose. Veuillez donc nous aider sur cette question.

Merci

[~ # ~] modifier [~ # ~]

ICI J'ai trouvé des informations utiles sur ma question. j'ai encore besoin de savoir comment ajouter des css ou des liens sur l'événement de chargement.

jquerysvg
26
kamal

La bibliothèque jquery-svg vise spécifiquement à faciliter cela: http://keith-wood.name/svg.html

Si vous souhaitez éviter d'utiliser une bibliothèque, vous devez prendre en compte quelques défis et décisions initiaux de base.

Tout d'abord, vous devez spécifier comment vous intégrez le SVG. SVG peut être inclus dans XHTML "en ligne" dans la plupart des navigateurs modernes. Deuxièmement, et plus généralement, vous pouvez incorporer le document SVG à l'aide d'une balise HTML d'intégration ou d'objet.

Si vous utilisez la première approche, vous pouvez utiliser un élément de script HTML dans le document HTML hôte pour importer jQuery, puis vos scripts dans le document HTML devraient pouvoir accéder aux éléments du document SVG en ligne facilement et comme vous le feriez. attendre.

Si, cependant, vous utilisez la deuxième approche et que vous incorporez le SVG à l'aide d'un objet ou d'un élément incorporé, vous avez encore quelques décisions à prendre. Tout d'abord, vous devez décider si le jQuery doit être importé dans

  • le contexte d'intégration HTML, à l'aide d'un élément de script HTML à l'aide d'un élément de script HTML, ou
  • le contexte intégré SVG, en utilisant un élément de script SVG à l'intérieur du document SVG.

Si vous utilisez cette dernière approche, vous devrez utiliser une ancienne version de jQuery (je pense que la 1.3.2 devrait fonctionner), car les versions plus récentes utilisent la détection des fonctionnalités, qui rompt avec les documents SVG.

L'approche la plus courante consiste à importer jQuery dans le document HTML hôte et à récupérer le nœud SVG à partir du contexte intégré. Cependant, vous devez être prudent avec cette approche, car le document SVG intégré se charge de manière asynchrone, et donc un écouteur de chargement doit être défini sur la balise d'objet afin de récupérer l'élément Host. Pour une description complète de la façon de récupérer l'élément de document du document SVG incorporé à partir de HTML, voir cette réponse: Comment accéder aux éléments SVG avec Javascript

Une fois que vous avez l'élément racine documentElement du document SVG incorporé, vous devrez l'utiliser comme nœud de contexte lorsque vous effectuez des requêtes avec jQuery dans le document HTML incorporé. Par exemple, vous pouvez faire ce qui suit (non testé, mais devrait fonctionner):

<html>
    <head>
        <title>SVG Illustrator Test</title> 
    <script src="jQuery.js"></script>
    <script>
        $(document).ready(function(){
            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 svgRoot  = svgDoc.documentElement;

                //now we can query stuff with jquery like this
                //note that we pass in the svgRoot as the context node!
                $("foo bar",svgRoot);
            },false);
        })
    </script>
    </head>
    <body>

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

    </body>
</html>
43
jbeard4

SVG utilise des éléments dans le DOM ie.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">
    <desc>My SVG</desc>
    <defs>
       <path fill="#ffffff" stroke="#ffffff" d="M100,100L100,100Z" style="fill-opacity:
        0.3; stroke-width: 1; stroke-linecap: round;" fill-opacity="0.3" 
        stroke-width="1" stroke-linecap="round">
</svg>

L'accéder et le manipuler peut être fait de la même manière que jQuery manipule n'importe quel autre objet dans le DOM. c'est à dire.

$('svg path').remove(); //removes the path.

Si vous recherchez une bibliothèque javascript pour manipuler les éléments SVG, consultez Raphael.js .

11
Andrew