Javascript Girl
  1. Javascript Girl
  3. SVG à PNG en conservant CSS à l'aide de javascript
Intereting Posts
Traverser la table html en utilisant jQuery Comment supprimer un duplicata de cheminement créé par des stylos sensibles à la pression? Heure étrangère à l'heure locale IE ne permet pas l'événement onClick sur l'élément DOM 'a' créé dynamiquement Ouverture de la caméra depuis l'Android WebView Requête HTTP de javascript utilisant le message brut, y compris les en-têtes Qui ajoutent "_" Paramètre de requête de soulignement unique? Analyser les données pour créer un volet de navigation Jquery slider – calendrier animé Pourquoi le lien Supprimer ne fonctionne-t-il pas dans ce projet Ruby on Rail? Si (la condition échoue dans jascript) Comment puis-je sélectionner des nœuds de texte avec jQuery? Ajax avec plusieurs boutons de soumission Prime Number Determination Javascript Masquer les variables passées dans l'URL

SVG à PNG en conservant CSS à l'aide de javascript

C'est un peu long, mais est-ce que quelqu'un sait d'un outil qui peut exporter un png à partir d'une entrée svg et conserver les styles CSS qui lui sont appliqués. J'ai utilisé canvg, mais tout semble noir dans la sortie, car les styles sont conservés dans css et ne font pas partie du document svg.

La solution est basée sur le Web, et j'aimerais effectuer le client client de conversion en utilisant une solution javascript si possible.

Mettre à jour:

Je comprends que vous utilisez une feuille de style externe pour votre balisage SVG. Je pense donc que vous avez besoin d'une solution en trois étapes:

  1. Effectuez les déclarations de feuille de style qui s'appliquent au balisage SVG en ligne. Ceci est fait le mieux pour le client. Je n'ai pas de solution dans le code source maintenant, mais il devrait être possible d'utiliser les implémentations d'interface de style W3C DOM Level 2 pour découvrir les sélecteurs qui s'appliquent à un élément et les déclarations qui ont été utilisées dans les blocs correspondants ( document.defaultView.getComputedStyle() seul entraînera probablement un fragment SVG ayant trop de déclarations en ligne).
  2. Convertir le balisage SVG avec les feuilles de style en ligne en PNG. Ceci est mieux fait sur le serveur (par exemple, avec ImageMagick), vous devrez donc envoyer le balisage SVG au serveur.
  3. Servez la ressource PNG à l'utilisateur.

Ces deux étapes pourraient être effectuées lors de la soumission de formulaire où, dans l'attribut onsubmit faites l'étape 1, puis appelez la méthode submit() du submit() .

@pluke, vous avez demandé dans les commentaires de la réponse de @PointedEars pour le code source pour transformer le style CSS externe en styles inline pour votre SVG. J'ai passé des heures à chercher un tel outil moi-même, et je n'en ai trouvé aucun. Cependant, j'ai découvert une solution assez spécifique qui applique le SVG généré avec Rickshaw / D3: @thirdcreed a posté le JavaScript sur: Rickshaw CSS / Axes dans JSDOM – adaptez simplement ces sélecteurs spécifiques D3 à vos éléments CSS / SVG personnalisés au besoin .