Balises svg
Transcription
Balises svg
www.nicolasvalls.fr.fm Balises svg Voici en quelques lignes les balises de bases en svg. BALISE SVG........................................................................................................ 2 RECTANGLES..................................................................................................... 4 CERCLES............................................................................................................. 5 ELLIPSES............................................................................................................. 6 POLYGONE.......................................................................................................... 7 POLYLIGNES....................................................................................................... 8 STROKE............................................................................................................... 9 FILL..................................................................................................................... 10 PATTERN........................................................................................................... 11 LES COURBES.................................................................................................. 12 TEXTE................................................................................................................ 13 ANIMATIONS..................................................................................................... 14 LIEN EXTERNE.................................................................................................. 15 UTILISATION DU JAVASCRIPT........................................................................ 16 PASSAGE D'UN AXE NORMAL A UN AXE SVG.............................................. 17 CLIPPING........................................................................................................... 18 VALLS Nicolas www.nicolasvalls.fr.fm BALISE SVG Un fichier svg doit obligatoirement être entre deux balises <svg>. Tout comme un fichier html qui possède 2 balises <html> et </html> Pour déclarer le début du svg : <svg width="largeur du svg" height="hauteur du svg" viewbox="0 0 100 100"> La viewbox est une notion primordiale en svg. C'est en quelque sorte la graduation à l'intèrieur du svg. Prenons comme exemple : <svg width="50px" height="50px" viewbox="-10 -10 100 100"> On a donc un svg qui occupe 50px de large et de hauteur dans le document. Cependant, au sein de ce svg on pourra définir des valeurs allant de –10 à 100 en largeur ainsi qu'en hauteur. Cela permet de pouvoir affiner le tracé. Par exemple on peut avoir la ligne suivante: <line x1="-9" y1="0" x2="99" y2="60"/> On ferme le svg à l'aide de la balise </svg> VALLS Nicolas www.nicolasvalls.fr.fm LIGNES <line x1= ‘’10 ‘’ y1= "10" x2="20" y2="40" stroke="black" fill="none"/> stroke=contour fill=remplissage VALLS Nicolas www.nicolasvalls.fr.fm RECTANGLES <rect x="point a gauche" y="point en haut" width="longueur sur les x" height="longueur sur les y"/> VALLS Nicolas www.nicolasvalls.fr.fm CERCLES <circle cx="x du centre du cercle" cy=" y du centre du cercle" r="rayon"/> VALLS Nicolas www.nicolasvalls.fr.fm ELLIPSES <ellipse cx="centre en x" cy="centre en y" rx="rayon" ry="rayon"/> VALLS Nicolas www.nicolasvalls.fr.fm POLYGONE <polygon stroke="…" fill="…" points="x1,y1 x2,y2…..xn,yn"/> VALLS Nicolas www.nicolasvalls.fr.fm POLYLIGNES <polyline points="x1 y1, x2 y2,x3y3,…"/> VALLS Nicolas www.nicolasvalls.fr.fm STROKE Stroke="Couleur du contour" Strocke-width=" épaisseur du trait" Stroke-opacity="nombre entre 0 et 1" 1=opaque Stroke-dasharray="5 2" pointillés, taille des pleins et des vides VALLS Nicolas www.nicolasvalls.fr.fm FILL Fill="couleur de remplissage" Fill-opacity="chiffre entre 0 et 1" idem que pour stroke VALLS Nicolas www.nicolasvalls.fr.fm PATTERN Défini un fond, une mosaïque, pour un objet svg. <defs> <pattern id="nomdupattern" x="0" y="0" width="100" height="100" viewbox="0 0 20 20"> <rect x="0" y="0" width="10" height="10" fill="red"/> </pattern> </defs> <circle fill="url(#nomdupattern)" stroke="black" cx="300" cy="200" rx="250" ry="150"/> ce qui donne: VALLS Nicolas www.nicolasvalls.fr.fm LES COURBES <path d="M30 100 100 20 A 20 30 0 0 1 120 50 L 120 110"/> Il y a beaucoup de paramètres (M,m,L,l,H,h,V,v,A,a,Q,q,T,t,C,c,S,s) avec plus ou moins de renseignements à fournir. VALLS Nicolas www.nicolasvalls.fr.fm TEXTE <text x="position en x" y=" position en y" style="cf plus bas">Texte</text> Les styles: Style="font-weight:bold;" Style="font-style:italic;" Style="text-decoration:underline;" Style="text-decoration:overline;" Style="font-size:20 ;" Si on veut que le texte suive une coube: <defs> <path id="courbe" d="M 30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"/> </defs> <text style="font-size: 12;"> <textpath xlink:href="#courbe"> Le texte qui suit la courbe </textpath> </text> </svg> VALLS Nicolas www.nicolasvalls.fr.fm ANIMATIONS <rect x="10" y="10" width="20" height="20"> <animate attributename="height" attributetype ="XML" begin="0s" dur="8s" from="20" to="250" fill="freeze"/> </rect> Si on veut que cette animation se répète: <rect x="10" y="10" width="20" height="20"> <animate attributename="height" attributetype ="XML" begin="0s" dur="8s" repeatCount="2" from="20" to="250" fill="freeze"/> </rect> ou <rect x="10" y="10" width="20" height="20"> <animate attributename="height" attributetype ="XML" begin="0s" dur="8s" repeatDur="8s" from="20" to="250" fill="freeze"/> </rect> Mais ces balises ne fonctionnent pas avec les couleurs, les rotations, les zooms. Pour ceux-ci on utilise ça: <text x="100px" y="100px" style="font-size:14; fill:red;"> le texte grossit! </text> <text x="100px" y="100px" style="font-size:14; fill:red;"> <animateTransform attributeName="transform" type="scale" begin="2s" from="1" to="3" dur="5s" repeatCount="1" fill="freeze"/> le texte grossit! </text> </svg> VALLS Nicolas www.nicolasvalls.fr.fm LIEN EXTERNE <a xlink:href="image.svg"> <text x="100" y="30" style="font-size:12pt;">Sous titre de l'image svg</text> </a> VALLS Nicolas www.nicolasvalls.fr.fm UTILISATION DU JAVASCRIPT <script> <![CDATA[ function elargir_cercle(evt) { var circle=evt.gettarget(); circle.setAttribute("r",50); } //]]> </script> <circle cx="1503 cy="100" r="25" fill="red" onmouseover="elargir_cercle(evt)"/> VALLS Nicolas www.nicolasvalls.fr.fm PASSAGE D'UN AXE NORMAL A UN AXE SVG Au début on a: On définit l'objet avec ses coordonnées dans le plan normal et on crée les axes: <Svg width="" height=""> <!- -création des axes--> <line x1="0" y1="0" x2="100" y2="0" stroke="black"> <line x1="0" y1="0" x2="0" y2="100" stroke="black"> <!- -l'objet --> <polygon points="40 40, 100 40, 70 70, 40 70" fill="gray" stroke="black"/> </svg> ce qui donne: C'est pas bon donc il faut effectuer une translation <Svg width="" height=""> <g transform="translate(0,100) scale(1,-1)"> <!- -création des axes--> <line x1="0" y1="0" x2="100" y2="0" stroke="black"> <line x1="0" y1="0" x2="0" y2="100" stroke="black"> <!- -l'objet --> <polygon points="40 40, 100 40, 70 70, 40 70" fill="gray" stroke="black"/> </g> </svg> Ce qui donne: VALLS Nicolas www.nicolasvalls.fr.fm CLIPPING <defs> <clipPath id="rectangleclip"> <rect id="rectangle" x="15" y="15" width="40" height="45" stroke="gray" fill="none/> </clipPath> </defs> <-- on ne garde que ce qui sera dans le rectangle - -> <circle cx="10" cy="10" r="30" stroke="black" fill=none" clip-path="url (#rectangleclip)"/> VALLS Nicolas