11521 sujets

JavaScript, DOM et API Web HTML5

Bonsoir à toutes et tous,

Voilà, je souhaite utiliser la bibliothèque GRASP (Green Sock) et l'animation sur un chemin vectoriel. Le truc c'est qu'il est nécessaire d'indiquer un "path". En soit, c'est pas compliqué. Sauf que je ne vois pas comment réaliser ceci "à la main" sans avoir de visuel.

L'idée est donc d'utiliser un logiciel pour tracer mon chemin et de l'enregistrer au format SVG.

Mon problème est : comment passé du SVG au path ?

Je cherche depuis hier mais a moins de passer à côté d'un truc, je ne trouve rien, en tout cas rien de "simple". Donc j'en appel a votre aide Smiley smile

Merci.
J'ai pas testé, mais il me semble qu'il suffit de récupérer un tracé généré par illustrator par exemple.
De prendre le code (bouton code svg), de le nettoyer et l'on à un beau svg qui correspond à son tracé.

Ça doit marché non ?
Modifié par Heillige Leben (26 Oct 2014 - 22:35)
La question c'est comment ?

Un exemple :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1280px" height="720px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g>
        <path d="M398.587,29.3314C398.587,29.3314 527.957,196.181 664.588,105.798C801.219,15.4163 874.344,46.3613 851.752,175.034C829.159,303.708 489.494,496.579 415.117,282.809C340.741,69.0386 230.039,138.05 186.91,208.397C143.781,278.745 112.194,542.158 450.101,573.046C788.008,603.933 977.562,557.167 966.49,690.057" style="fill:none;stroke-width:1px;stroke:black;"/>
    </g>
</svg>


Donc tu récupère le path, ok mais tu fais quoi de ce genre de valeur : 29.3314C398.587 ?