ICI header("Location: http://www.mytesting.fr ");

AJOUTER UNE BARRE DE LECTURE A UN EXEMPLE SVG.

par André Marini 20 Mars 2015, 08:00 Images

AJOUTER UNE BARRE DE LECTURE A UN EXEMPLE SVG.

Le format .SVG gère quelques formes géométriques de base, mais aussi des chemins qui utilisent les courbes de Bézier et permettent ainsi d’obtenir presque n’importe quelle forme. 

 

SVG est un format d'image vectorielle.

 

Inkscape sait très bien lire les documents .SVG

Inkscape est un programme spécialement conçu pour l'édition ou la création de graphisme vectoriel.

 

Il s'agit d'un logiciel libre, donc chaque utilisateur a la possibilité d'apporter des modifications s'il a la compétence pour cela.

 

Il propose toute une panoplie d'outils pour effectuer du bon travail.  

 

Opera peut également les lire, et permet de zoomer. 

 

Firefox sait lire les fichiers SVG, mais ne permet pas de zoomer.

 

Après avoir mis l'exemple en place, on peut lui adjoindre une barre de lecture qui déclenche ou arrête l'animation.

 

CODE

 

<svg width="220" height="50" viewBox="0 0 220 50"
xmlns="EXEMPLE SVG">
<desc>SVG</desc>

<rect x="5" y="5" rx="10" width="210" height="40" fill="none" stroke="grey"
stroke-width="2" />
<line x1="70" y1="5" x2="70" y2="45" stroke-width="3" stroke="grey" />
<line x1="140" y1="5" x2="140" y2="45" stroke-width="3" stroke="grey" />

<polyline fill="grey" stroke-width="0" style="cursor:pointer;" onclick="alert("play");"
points="25,14 45,25 25,36 30,25" />
<rect x="95" y="14" width="15" height="22" fill="white" stroke="none"
style="cursor:pointer;" onclick="alert("pause");" />
<polyline fill="grey" stroke-width="0" style="cursor:pointer;" onclick="alert("pause");"
points="95,14 95,36 100,36 100,14 105,14 105,36 110,36 110,14" />
<rect x="165" y="14" width="22" height="22" fill="grey" stroke-width="0"
style="cursor:pointer;" onclick="alert("stop");" />
</svg>

 

RESULTAT

 

SVG

commentaires

Haut de page