Alternative d’Inkscape pour la manipulation programmatique de SVG à l’aide de PHP

Darwin von Corax

Alternative d’Inkscape pour la manipulation programmatique de SVG à l’aide de PHP


EDIT: J’ai initialement déclaré que je ne pouvais pas manipuler les SVG Inkscape avec JavaScript; c’était une erreur de ma part, en raison de mon échec (dans ma joie de découvrir ce site) à revisiter le projet qui était en sommeil depuis plus d’un an. J’aimerais en fait faire quelques manipulations côté serveur avec PHP; c’est là que se pose le problème.

Je cherche à créer des images SVG scriptables Java pour un projet de tableau de bord Web, et je voudrais les initialiser en utilisant PHP côté serveur avant de les charger. La dernière fois que j’ai regardé Inkscape, il enterrait des attributs cruciaux comme la largeur du trait, la couleur de remplissage, la police, etc. dans l’attribut style plutôt que dans les attributs des éléments individuels; cela fait de la manipulation programmatique un PITA sérieux.

Quelqu’un connaît-il un bon éditeur SVG open-source qui définit les caractéristiques des éléments dans les attributs des éléments individuels, ou un outil qui peut convertir des fichiers Inkscape?

Si je comprends bien, pour (par exemple) utiliser JavaScript PHP / XML DOM pour modifier le remplissage d’un rectangle, il doit être défini comme

 <svg ...> <rect id="temp_level" fill="#0000ff" stroke="none" width="25" height="60" x="1" y="1" /> </svg> 

tandis qu’Inkscape le définit comme

 <svg ...> <rect id="temp_level" style="fill:#0000ff;stroke:none" width="25" height="60" x="1" y="1" /> </svg> 

et que JavaScript PHP ne peut pas accéder aux éléments individuels de l’attribut style .

Antony

Voici un exemple de ma manipulation de SVG avec JQuery et oui je suis d’accord avec vous que c’était un PITA (pas JQuery – JQuery est fantastique). Il serait peut-être plus facile de comprendre ce que vous essayez de faire si vous deviez publier deux exemples de fragments de SVG (avant et après)?

Darwin von Corax

Ce que je voudrais faire, c’est utiliser les fonctions DOM de javascript pour manipuler des choses comme la couleur de remplissage ou les dimensions d’un objet, par exemple. un widget thermomètre avec une colonne colorée qui grandit, rétrécit et change de couleur en fonction de la valeur à afficher. La norme W3 SVG indique que ceux-ci doivent être définis dans les attributs de présentation, ce qui les fait partie du DOM. Inkscape les met dans des styles en ligne, qui sont en dehors du DOM et tellement plus difficiles à animer.

Antony

Êtes-vous sûr? La page que vous avez liée dans la norme SVG mentionne l’attribut style mais ne semble pas avoir de problème avec lui, et les styles individuels semblent également accessibles à partir du DOM .

Darwin von Corax

J’ai ajouté un exemple de XML à la question d’origine. Pouvez-vous me montrer quelques exemples de JavaScript qui peuvent changer, par exemple. la couleur de remplissage du rectange? Si vous le pouvez, je vous en serais très reconnaissant. Notez que le problème que j’essaie de résoudre n’est pas la manipulation de SVG, mais la manipulation d’un SVG créé par Inkscape.

Antony

Bien sûr, rendons votre rectangle bleu rouge: document.getElementById('temp_level').style.fill = 'red';

Réponses


 Antony

Oui, cela semble en effet être une limitation par rapport à la bibliothèque PHP DOM . Beaucoup plus facile à corriger du côté d’Inkscape. Choisissez d’enregistrer en tant que « svg optimisé »

Inkscape enregistrer en svg optimisé

Et puis assurez-vous que la case « Style to XML » est cochée.

entrez la description de l'image ici

Darwin von Corax

Par Tesla, cela a fonctionné! Je vous remercie.

 

#à, #de, #la, #pour, alternative, d’Inkscape, l’aide, manipulation, PHP, programmatique, SVG

 

elle.fr

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *