Dev Faq
11
votes

Chargement d'un fichier SVG avec svg.js

J'ai une page HTML5 avec un élément SVG. Je souhaite charger un fichier SVG, extraire des éléments de celui-ci et en disposer un par un avec un script.

J'ai utilisé JQuery pour charger le fichier SVG avec succès, en utilisant .charger () , ayant inséré l'arbre SVG à l'intérieur du DOM. Mais j'aimerais essayer svg.js pour manipuler les éléments, mais dans la documentation, je ne trouve pas de moyen d'initialiser la bibliothèque à l'aide d'un SVG existant élément, où je vais obtenir les objets.

L'idée est d'accéder à l'élément SVG chargé (ou de le charger directement avec la bibliothèque SVG.JS), copiez les objets simples à un autre élément et déplacez-les où j'ai besoin. Comment faire cela?

2 commentaires

Mise à jour: Entre-temps, cela a été ajouté à la fonctionnalité de base: DocumupUp.com/ WOUT / SVG.JS # Import - Export-SVG

Cela pourrait vous aider aussi à vous aider aussi: Stackoverflow.com/Questions/11978995/...

3 Réponses :

13
votes

Vous devez jeter un coup d'œil sur le plugin SVG.IMPORT.JS

La documentation indique ...

Tous les éléments importés avec un ID seront stockés. L'objet avec tous Les éléments stockés sont renvoyés par la méthode d'importation: xxx

6 commentaires

@RICARDO Votre commentaire n'est pas utile, s'il vous plaît soyez plus précis.

C'est le site de l'Oficial: svgjs.com/import et il ne rend pas Un simple SVG comme celui

Je suppose que cela deviendrait finalement être réparé, voici le problème Github.com/ Wout / svg.import.js / Problèmes / 43

Merci pour le lien sur Github!

SVG.JS Version 2 a ajouté la fonctionnalité d'importation dans le noyau

Re: @ Ricardo's Link - Le nouveau lien est svgjs.com/importing-exporting/ # import-export-svg - Merci pour les indicateurs!

5
votes

Si vous connaissez l'ID d'éléments, vous pouvez utiliser la méthode SVG.ETT après l'importation de SVG cru: 

SVG.get('element_id').move(200,200)

1 commentaires

Comment obtenir l'identifiant de var store = draw.svg (rawsvg) (code de @duopixel) ou pour déplacer stocker ? J'utilise store.get ('couche_1'). Déplacez (x, y); mais peut obtenir attr ("id")

16
votes

donné un fichier SVG 'image.svg' contenant xxx

et un fichier 'index.html' contenant xxx

alors si fichier 'script.js' contient xxx

puis l'image SVG s'affichera et déplacera le pointeur de la souris dans et vers l'extérieur de la fenêtre du navigateur changera la couleur du rectangle de jaune au bleu.

Vous devez maintenant pouvoir remplacer tout fichier image SVG et définir un nombre de fonctions pour manipuler l'image à l'aide de la bibliothèque SVG.JS. La chose importante à réaliser est que les appels aux méthodes SVG.JS ne réussiront pas si elles ont lieu avant la fonction $ (document) .Ready .Ready. .

pour des points bonus, J'ai également trouvé la copie des valeurs des attributs «ViewBox», «largeur» et «hauteur» en ajoutant les lignes suivantes après la déclaration de «$ TMP» pour fonctionner mieux pour afficher avec succès le contenu des fichiers SVG arbitraires: xxx

5 commentaires

C'est la réponse que j'aimerais avoir pu trouver quelque part sur Internet. En espérant que cela enregistre les prochaines heures SVG & JavaScript.

Cela va en effet charger et afficher le SVG, mais j'ai eu la peine de la manipuler de zéro la chance ou même d'avoir une référence à un élément à l'intérieur du SVG.

J'ai eu le même problème que @headcode. Il rend, mais je ne peux pas comprendre comment manipuler l'article importé.

Ne pas avoir regardé cela depuis plusieurs mois maintenant, j'ai essayé de reproduire cela de zéro et a connu le même problème! J'ai finalement compris ce qui se passait et élargi sur l'exemple pour éviter de frustrer plus de personnes à l'avenir.

Pour moi, cet exemple ne rend rien :( (Utilisation de SVG JS Version 3)

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO