Discussion :

[bronon]

Bonjour à tous,
Je ne suis pas sûr d'être sur le bon forum mais comme je n'ai trouvé de forum spécifique à SVG je publie ici.
je commence a essayer de scripter SVG. J'ai quelques soucis je voudrais écrire un script JavaScript me permettant de définir une croix (de fermeture) dont je pourrais faire varier et la couleur et la dimension suivant le fond et la dimension de la fenêtre ouverte.
J'ai bien compris l'idée d'écrire une définition de cette croix constitué de deux simple traits à 90 degrés, faire varier la couleur par un JavaScript.
Mon problème je n'y arrive pas, je n'arrive pas à dessiner deux segments obliques perpendiculaires par exemple et encore moins à faire varier la couleur !
Je n'ai rien trouvé d'assez explicite pourvoi sur le Web !
Si quelqu'un a une piste à me proposer d'avance merci

[SpaceFrog]

raphael.js

[bronon]

Merci pour ta réponse,
J'ai regardé raphael.js j'ai beaucoup de mal à rentrer dedans notamment dans la doc que je trouve pas clair du tout.
Sinon si tu as une proposition avec raphael.js pourquoi ?
Mais avant toute choses j'aime comprendre ce que fais !
Slts

[yahiko]

C'est pourtant très basique... Et le web regorge de tutoriels sur SVG.

http://jsfiddle.net/gspo84c0/

[bronon]

Ah super la je commence à comprendre.
maintenant comment faire pour pivoter la croix de 45° ?
Désolé mais je suis bourrin jusqu'au bout …
Encore merci
Bon App

[yahiko]

Imagine un carré/rectangle dont tu dessines les diagonales...

[SpaceFrog]

Fallait pas sécher les cours de trigonométrie ...

[SylvainPV]

J'ai trouvé ça en CSS pur : http://codepen.io/dcdev/pen/izvlh ; http://sarasoueidan.com/demos/navicon-transformicons/

[bronon]

Merci pour vos réponses, effectivement les choses s'éclaircissent un peu
Cdlt

[sekaijin]

sinon il suffit d'utiliser le DOM

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<svg id="mysvg">
//draw some svg elements
<svg>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var svg = document.getElementsById('mysvg'); //Get svg element
var aLine= document.createElementNS("http://www.w3.org/2000/svg", 'line');
aLine.setAttribute('x1',0);
aLine.setAttribute('y1',200);
aLine.setAttribute('x2',0);
aLine.setAttribute('y2',200);
svg.appendChild(aLine);
var aLine2= document.createElementNS("http://www.w3.org/2000/svg", 'line');
aLine2.setAttribute('x1',0);
aLine2.setAttribute('y1',200);
aLine2.setAttribute('x2',200);
aLine2.setAttribute('y2',0);
svg.appendChild(aLine2);

tout comme anec le DOM HTML tu manipule avec les mêmes méthodes les éléments et attributs du DOM SVG
Le seul point qui diverge le createElement qui doit être rempacé par createElementNS avec le namespace svg

A+JYT