Comment obtenir le code SVG à partir de la page html, à l'aide de jQuery ou JavaScript?

J'ai simple page HTML avec svg comme ceci:

<div id="plan">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="layer3">
   <rect width="105.71429" height="80" x="351.42856" y="152.36218" id="rect1" style="fill:#008000"></rect>
   <rect width="120" height="85.714287" x="500" y="389.50504" id="rect2" style="fill:#008000"></rect>
</g>
</svg>
</div>

Comment je peux obtenir de la chaîne:

<rect width="105.71429" height="80" x="351.42856" y="152.36218" id="rect1" style="fill:#008000"></rect>

à partir de ce fichier svg. Je peux utiliser jquery et jquery svg. J'ai essayer:

    $(document).ready(function() {
    console.log($("#plan #rect1")[0]);
})

Dans la console je profite de cette chaîne, mais il me faut de la chaîne dans une variable comme ceci:

var str = $("#plan #rect1")[0];

variable str est [objet SVGRectElement]
[enter description du lien ici]Un

InformationsquelleAutor VasyambaTula | 2012-03-26
  1. 1
    $('#rect1')[0]

    Cela devrait aider. Si vous souhaitez accéder à la balise au lieu de jQuery élément, utilisez [] pour obtenir encapsulé élément.

    Modifier :

    Cela devrait faire l'affaire pour vous.

    La solution expliqué, c'est pour envelopper votre sélection dans un autre tag et d'appel .html() pour afficher son contenu.

    N'oubliez pas la .clone() l'appel avant d'ajouter dans votre temp div, sinon vous allez avoir des problèmes dans votre code html 🙂

    • J'utilise var str = $("#plan > #rect1")[0]; alert(str); mais str est pas défini
    • $("#plan > #rect1") va rechercher l'enfant suivant dans le plan qui a pour id "rect1", mais votre enfant est un " g " de la balise. C'est pourquoi $("#plan > #rect1") ne renvoie rien. ">" moyen direct de l'enfant. Utiliser $("#plan #rect1") à la place.
    • J'utilise: var str = $("#plan #rect1").html(); alert(str); il a fait erreur Uncaught TypeError: Ne peut pas appeler la méthode 'remplacer' undefined. j'utilise: var str = document.getElementById ("rect1'); var st = str.innerHTML; alert(st); mais var st est pas défini
    • Suffit d'utiliser $("#plan #rect1")[0] comme je l'ai d'abord écrire. Il fonctionne pour moi. jsfiddle lien
    • Ok, merci, son travail pour la console, mais je dois le faire c'est la chaîne dans une variable. Si j'écris $("#plan #rect1")[0] dans une variable, la variable est [objet SVGRectElement] lien
    • Voir mon edit, c'est ce que vous avez besoin.
    • Oui, merci, son travail =)
    • Super ! (n'oubliez pas de valider la réponse)

    InformationsquelleAutor Mordhak
  2. 5

    De combiner les réponses précédentes (qui ne sont pas claires pour moi au début) le moyen d'obtenir la chaîne SVG est la suivante:

    var str = $('<div>').append($('#plan #rect1').clone()).html();
    • très bien, merci
    InformationsquelleAutor Iwo Banas