Charge SVG dans une div avec le composant logiciel Enfichable SVG

Quelle est la bonne façon de charger un fichier SVG dans une div à l'aide de SnapSVG?

La suite de la documentation, j'ai ce JS:

var s = Snap();
Snap.load("fox.svg", function (f) {
    s.append(f.select("g#fox"));
});

Cette charge le SVG juste au-dessus de la body tag, toutefois, si j'essaie de définir son emplacement, il ne se passe rien, il n'y a pas d'erreur. C'est ce que j'ai essayé jusqu'à présent:

var s = Snap('#myDiv');

Où vais-je tort?

Je pense que #myDiv pourraient avoir besoin d'être un élément SVG, ex: <svg id="myDiv"></svg>
Essayé... malheureusement pas. Je viens d'obtenir une erreur: Cannot call method 'append' of null
Le script doit s'exécuter une fois que le document est chargé. Le append sera null que le sélecteur d'ID échouera si le script est en cours d'exécution avant que le DOM est prêt.

OriginalL'auteur Sheixt | 2013-11-21

  1. 10

    Cela devrait fonctionner, ce n'est pas très éloigné de votre exemple, il est donc difficile de dire à quoi de mal avec le vôtre sans un exemple vivant et le svg à regarder.

    Si vous souhaitez télécharger un violon ou de quelque chose, il peut l'aider.

    var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

    Edit: Juste pour s'étendre sur Duopixels réponse, l'élément que vous tentez d'ajouter, devrait être un élément svg (c'est à dire 

    <svg id="mysvgtoload">...</svg> //you can add an svg to a div
<g id="mygrouptoload">...</g> //you can't add this to a div, but could to an svg element

    dans le fichier) ou d'ajouter un élément (g ou le chemin d'accès ou quoi que ce soit) à une balise svg/élément dans votre code html. Je soupçonne que vous pouvez peut-être essayer d'ajouter un élément direct à un div, qui n'est pas le travail, mais il est difficile de le dire sans que le fichier.

    Également double vérifier que le Magnétisme est bien chargé, et vous pouvez faire une console.log( data ) dans la fonction afin de vérifier qu'il a chargé le balisage correct.

    Merci pour la réponse détaillée, il a été très utile. Vous avez eu raison, d'abord j'ai été de tenter de rendre le SVG dans un <div> élément.

    OriginalL'auteur Ian