Outil de création de gradient 100% SVG
Nouvelle version compatible avec Firefox 1.5, Opera 9 et Batik 1.6
Objets SVG et script sont séparés
Le script est chargé au démarrage
Les objets SVG sont chargés à la demande et déchargés après utilisation.
Vous pouvez créer votre propre design et le sauver dans un fichier SVG ou SVGZ.
Pour utiliser l'outil, vous devez
1) charger les scripts avec
<script xlink:href="js/alert.js"/>
gestion des fenêtres alert et prompt
<script xlink:href="js/pickcolor_HSL.js"/>
gestion du choix de la couleur
<script xlink:href="js/gradient.js"/>
gestion du gradient
<script xlink:href="js/opera.js"/>
emulation de getURL() et parseXML()
<script xlink:href="js/tools.js"/>
déplacement des fenêtres
L'outil utilise les fenêtres alert et prompt
2) réserver dans <defs> tag, un groupe avec "motifs" comme id
pour stocker le gradient créé.
3) réserver à la fin une place avec <g id="messages" transform="translate(100,50)"></g>
par exemple
4) mettre dans un groupe <defs> les gradients utilisés pour les boutons
5) appeler l'outil avec
add_gradient("svg/radialgradient.svg","messages",num);
dans l'ordre: fichier SVG, nom du groupe où insérer le fragment,nombre pour
l'utilisation
5) créer une fonction pour utiliser le gradient créé dans votre SVG principal
function messages_use_gradient(result,num_w)
{
if (!result)
return
nb_gradient+=1;
node=svgdoc.getElementById("gradient");
node.setAttribute("id","gradient"+nb_gradient.toString());
switch(num_w)
{
case 0:
obj=svgdoc.getElementById("rect1");
obj.setAttribute("fill","url(#gradient"+nb_gradient.toString()+")");
break;
...............
}
}
Contraintes
svgdoc doit être le nom de SVGDocument
nom
du groupe +"_use_gradient" le nom de la fonction
Dans le design SVG, cette fonction est appelée
quand vous fermez la fenêtre avec
onclick="close_gradient(true)".
La fonction gradient_tape permet d'utiliser les touches Enter et Escape pour
fermer la fenêtre.
Vous devez conserver les id des objets ou alors modifier le script.
Quand l'outil est fermé avec OK, il renvoie le gradient créé avec
"gradient" comme id.
Si vous voulez utiliser plusieurs gradients, vous devez changer son id, voir
l'exemple de fonction ci-dessus.