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
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
LIGNES
<line x1= ‘’10 ‘’ y1= "10" x2="20" y2="40" stroke="black" fill="none"/>
stroke=contour
fill=remplissage
VALLS Nicolas
RECTANGLES
<rect x="point a gauche" y="point en haut" width="longueur sur les x"
height="longueur sur les y"/>
VALLS Nicolas
CERCLES
<circle cx="x du centre du cercle" cy=" y du centre du cercle" r="rayon"/>
VALLS Nicolas
ELLIPSES
<ellipse cx="centre en x" cy="centre en y" rx="rayon" ry="rayon"/>
VALLS Nicolas
POLYGONE
<polygon stroke="…" fill="…" points="x1,y1 x2,y2…..xn,yn"/>
VALLS Nicolas
POLYLIGNES
<polyline points="x1 y1, x2 y2,x3y3,…"/>
VALLS Nicolas
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
FILL
Fill="couleur de remplissage"
Fill-opacity="chiffre entre 0 et 1" idem que pour stroke
VALLS Nicolas
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
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
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
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:
begin="0s" dur="8s" repeatCount="2" from="20" to="250" fill="freeze"/>
</rect>
ou
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
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
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
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">
<!- -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-->
<!- -l'objet -->
<polygon points="40 40, 100 40, 70 70, 40 70" fill="gray" stroke="black"/>
</g>
</svg>
Ce qui donne:
VALLS Nicolas
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

Balises svg

Transcription

Documents pareils

Projet Multimédia

Export to PDF

Télécharger ce communiqué

Conversion de fichiers géographiques du format textuel au format SVG

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

SVG, créer des interfaces riches conception pour navigateurs Web

Programme

coffret joaillerie

COMMUNIQUE DE PRESSE La loi Lang mise à mal Malgré l