INITIATION AU VML | EDITION DE DESSIN | INTERACTIVTÉ ET ANIMATION

LES PRINCIPAUX ELEMENTS VML


L'ELEMENT shape | L'ELEMENT group | L'ELEMENT path | L'ELEMENT fill | L'ELEMENT stroke | L'ELEMENT shadow | L'ELEMENT extrusion | L'ELEMENT shapetype | L'ELEMENT textpath

Consacrons-nous désormais directement au code source (comme nous l'avons fait avec notre simple rectangle en page d'accueil).
C'est en effet le meilleur moyen d'agir sur toutes les possibilité qu'offre VML pour développer efficacement vos créations.
Nous allons donc travailler uniquement avec le Bloc-notes et Internet Explorer, et étudier en détail les propriétés et attributs de chaque élément.

L'ELEMENT shape : (forme libre)

Sélectionnez en surbrillance le code ci-dessous, copier-le et collez-le sur une nouvelle page du bloc-note.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' fillcolor=green stroked=f />

<v:shape
style='visibility:visible;left:14;top:3;width:100;height:100;rotation:0;flip:null'
id=forme  type=""  coordsize=1000,1000  href="http://www.w3.org/TR/1998/NOTE-VML-19980513"
target=""  class=""  title="Mon dessin"  alt="Forme VML"
stroked=t  strokecolor=red  strokeweight=3  filled=t  fillcolor=yellow  print=t
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe
>
</v:shape>

</v:group>

</body>
</html>

Enregistrez votre nouvelle page Web sous "Dessin1.htm" par exemple (voir consignes en page d'accueil).
Ouvrez-la dans Internet Explorer pour y voir apparaitre le dessin ci-dessous.

Essayez-vous à changer les valeurs du code source de votre dessin à partir des indications du tableau ci-dessous.
Enregistrez votre page Bloc-notes à chaque changement et actualisez votre page Web pour voir les effets produits.

Principaux ATTRIBUTS DE STYLE ET ATTRIBUTS DIRECTS applicables:
Type Attribut Valeur par défaut Description
style visibility visible La mention hidden fait disparaitre la forme.
style top 0 Marge du haut par rapport au conteneur direct de la forme.
style left 0 Marge de gauche par rapport au conteneur direct de la forme.
style width 100 La largeur de l'enveloppe rectangle de la forme.
style height 100 Hauteur de l'enveloppe rectangle de la forme.
style rotation 0 Angle de rotation du rectangle de référence. De 0 à 360° dans le sens des aiguilles d'une montre. De 0 à -360° dans le sens inverse.
style flip null Prend la valeur "x" ou "y" ou les deux en même temps. "x" rend la symétrie horizontale de la forme. "y" rend la symétrie verticale.
style position static Au sein d'un groupe, la position prend la valeur absolute d'office.
direct id null Identité propre de la forme. Utilisée pour cibler la forme par une action de scripts au sein d'un ensemble d'objets.
direct type null Lorsque plusieurs formes sont calquées sur un même modèle (voir plus loin la "shapetype"), elles sont typées par une identification parente à la forme mère.
direct coordsize 1000 1000 Coordonnées de référence pour la largeur et la hauteur de la forme.
direct path null Chaine de code en points de commandes définissant le chemin du tracé de la forme.
direct href null L'URL cible lorsque l'on clique sur la forme.
direct target null Le cadre cible liée à l'URL.
direct class null Référence "class" de la feuille de style.
direct title null Infobulle émise au survol de la forme.
direct alt null Texte de remplacement en absence d'affichage.
direct stroked true Détermine si la forme est entourée d'une ligne de contour ou non. Valeurs "t" ou "f", ou "1" ou "0" (vrai ou faux).
direct strokecolor black Couleur de contour.
direct strokeweight 0.75 Épaisseur du contour.
direct filled true Détermine si la forme possède un remplissage ou non. Valeurs "t" ou "f", ou "1" ou "0" (vrai ou faux).
direct fillcolor white Couleur principale de laforme.
direct print true Possibilité ou non d'imprimer la forme.


L'ELEMENT group : (groupe d'objets)

L'élément group est lié aux mêmes attributs de style que l'élément shape.
Pour les attributs directs, seuls sont concernés: id, coordsize, href, target, class, title, alt.

NOTE: Un groupe peut lui-même faire partie d'un autre groupe conteneur. On parle alors d'un sous-groupe.


L'ELEMENT path : (chemin vectoriel)

Principaux ATTRIBUTS applicables:
Type Attribut Valeur par défaut Description
direct id null Identité propre du chemin vectoriel. Utilisée pour cibler le chemin vectoriel par une action de scripts au sein d'un ensemble d'objets.
direct v null Chaine de valeurs et de commandes définissant le chemin vectoriel.
direct limo 0,0 Coordonnées du point à partir duquel une forme peut être étirée et déformée.
direct fillok t Détermine si la forme peut être remplie ou non.
direct shadowok t Détermine si la forme peut recevoir une ombre ou non.
direct arrowok f Détermine si le chemin de la forme peut être terminé par des têtes de flèche ou non.
direct gradientshapeok f Permet un dégradé radial en fonction des bords de la forme, ou non (par défaut) en fonction des bords du rectange de l'enveloppe de la forme.
direct textpathok f Détermine si le chemin de la forme peut recevoir du texte ou non.
direct textboxrect null Position de la boite de texte inséré dans la forme. Les valeurs affectent la position gauche (L), haut (T), droite (F) et bas (B) sous la forme d'une chaine (L,T,F,B). Dans le cas de plusieurs boites: (L1,T1,F1,B1 ; L2,T2,F2,B2 ; ...)


L'ELEMENT fill : (espace de remplissage)

Créez un nouveau dessin VML en collant le code ci-dessous sur la source de vote page Web.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' fillcolor=green stroked=f />

<v:shape id=forme  stroked=f style='left:14;top:3;width:100;height:100'
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>

<v:fill id=remplissage type=gradienttitle on=t color=red opacity=1 color2=yellow
colors=null angle=0 focus=0 focussize="" focusposition=.5,.5 method=any
src=null size=0,0 position=0,0
/>

</v:shape>

</v:group>

</body>
</html>

Principaux ATTRIBUTS applicables:
Type Attribut Valeur par défaut Description
direct id null Identité propre du remplissage. Utilisée pour cibler le remplissage par une action de scripts au sein d'un ensemble d'objets.
direct type solid Prend les valeurs: "solid" pour un remplissage unicolor.
"gradient | gradientradial | gradienttitle" pour un remplissage de couleurs dégradées.
"tile | pattern | frame" lorsqu'une image fait office de remplissage.
direct on true Détermine si la forme possède un remplissage ou non. Valeurs "t" ou "f", ou "1" ou "0" (vrai ou faux).
direct color white Couleur primaire de la forme.
direct opacity null Opacité de la couleur primaire de remplissage. S'évalue de 0 à 1 en centésimal.
direct color2 white Couleur secondaire pour les dégradés de couleur ou pour les images dans d'un remplissage du type "pattern".
direct o:opacity2 null Opacité de couleur secondaire de remplissage. S'évalue de 0 à 1 en centésimal.
POUR LES DÉGRADÉS DE COULEURS
direct colors null Couleurs intermédiaires d'un dégradé dans leur position respective.
Ex:".33 red, .71 blue, .9 green" (s'évalue en centésimal).
La position couleur primaire "color" est de 0. La position couleur secondaire "color2" est de 1.
direct angle 0 Angle de direction du dégradé dans le cas du type "gradient".
direct focus 0 Emplacement du point de focalisation du dégradé. S'évalue de -1 à +1 en centésimal.
direct focussize 0,0 Dimensions du rectangle correspondant à la surface soumise au dégradé radial. Cette surface est au moins égale à l'enveloppe de la forme dessinée.
direct focusposition 0,0 Position x,y (gauche et haut) du rectangle correspondant à la surface soumise au dégradé radial. S'évalue en centésimal.
direct method any Quatre présélections progressives de concentration de focalisation. Dans l'ordre: "sigma", "none", "any", "linear".
POUR LES IMAGES DE REMPLISSAGE
direct src null URL d'une image à charger pour un remplissage du type "tile" "pattern" ou "frame".
direct size 0,0 Taille en pixels de l'image servant de remplissage. Ex: ".5,2" (largeur réduite de moitié et hauteur doublée).
direct position 0,0 Situation de point de référence du rectangle correspondant à l'enveloppe du dessin et au point d'origine de l'image. S'évalue de "0.0,0.0" à "1,1" (x,y) en centésimal. "1,1" correspondant au dimensions de l'image.


L'ELEMENT stroke : (ligne de contour)

Créez un nouveau dessin VML en collant le code ci-dessous sur la source de vote page Web.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' fillcolor=green strokeweight=5 />

<v:shape id=forme style='left:14;top:3;width:100;height:100'
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>

<v:fill id=remplissage type=gradienttitle color=red color2=yellow focusposition=.9,.6 focus=.5 />

<v:stroke id=contour on=t weight=15 color=aqua opacity=.9
linestyle=thickbetweenthin miterlimit=2 joinstyle=miter endcap=round dashstyle=longdashdot
filltype=pattern src=Cgn1.gif imagesize=.05,.05 color2=blue
startarrow=none endarrow=none
/>

</v:shape>

</v:group>

</body>
</html>

Enregistrez l'image de remplissage de ligne "Cgn1.gif" >

Principaux ATTRIBUTS applicables:
Type Attribut Valeur par défaut Description
direct id null Identité propre du contour. Utilisée pour cibler le contour par une action de scripts au sein d'un ensemble d'objets.
direct on true Détermine si la forme possède un contour ou non. Valeurs "t" ou "f", ou "1" ou "0" (vrai ou faux).
direct weight .75 Epaisseur de la ligne du contour. Prend la notation "strokeweight" pour l'attribut situé à l'intérieur des balises d'une forme.
direct color black Couleur primaire du contour. Prend la notation "strokecolor" pour l'attribut situé à l'intérieur des balises d'une forme.
direct opacity null Opacité du contour. S'évalue de 0 à 1 en centésimal.
direct linestyle single "single", "thinthin" (1:1:1), "thinthick", (1:1:2) "thickthin" (2:1:1), "thickbetweenthin" (1:1:2:1:1)
direct miterlimit 8.0 Distance maximum entre le sommet de l'angle intérieur et le sommet de l'angle extérieur d'une jonction angulaire de deux courbes. Cette valeur est un multiple de la valeur de l'épaisseur de la ligne de contour.
direct joinstyle round "round": jonction arrondie. "bevel": jonction biseautée. "miter": jonction angulaire.
direct endcap flat Extrémité de ligne. "flat": plat. "square": angulaire. "round": arrondi.
direct dashstyle solid Lignes interrompues. Prend les valeurs: "solid | dot | dash | dashdot | longdash | longdashdot | longdashdotdot"
ou: "2 2", "0 2", "2 2 0 2", "2 2 0 2 0 2", "1 2", "4 2", "8 2", "4 2 1 2", "8 2 1 2", "8 2 1 2 1 2"
direct filltype solid Prend les valeurs: "solid", "tile", "pattern", "frame".
direct src null URL d'une image à charger pour un remplissage de contour du type "tile" "pattern" ou "frame".
direct imagesize 0,0 Taille de l'image servant de remplissage.
direct color2 black Seconde couleur utilisée pour le remplissage de type "pattern".
direct startarrow none Tête en forme de flèche pour l'origine de la ligne.
Prend les valeurs: "none | block | classic | diamond | oval | open | chevron | doublechevron"
direct startarrowwidth medium Epaisseur de la tête en flèche pour l'origine de la ligne. Prend les valeurs: "narrow | medium | wide".
direct startarrowlength medium Longueur de la tête en flèche pour l'origine de la ligne. Prend les valeurs: "short | medium | long".
direct endarrow none Tête en forme de flèche pour la fin de la ligne.
Prend les valeurs: "none | block | classic | diamond | oval | open | chevron | doublechevron"
direct endarrowwidth medium Epaisseur de la tête en flèche pour la fin de la ligne. Prend les valeurs: "narrow | medium | wide".
direct endarrowlength medium Longueur de la tête en flèche pour la fin de la ligne. Prend les valeurs: "short | medium | long".


L'ELEMENT shadow : (ombre)

Créez un nouveau dessin VML en collant le code ci-dessous sur la source de vote page Web.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' fillcolor=green strokeweight=5 strokecolor=maroon />

<v:shape id=forme style='left:14;top:3;width:100;height:100'
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>

<v:fill id=remplissage type=gradientradial focusposition=.11,-.03 focus=.2
colors="0 blue;.2 lime;.3 aqua;.4 white;.7 #f952a0;.8 #c50849;.9 #b43e85;1 #f8b049" />

<v:stroke id=contour weight=9.2 color=aqua opacity=.9
linestyle=thickbetweenthin miterlimit=2 joinstyle=miter endcap=round dashstyle=longdashdotdot
filltype=pattern src=Cgn1.gif imagesize=.05,.05 color2=red />

<v:shadow id=ombre on=t type=double origin=0,0 matrix=null
color=fuchsia offset=-5pt,-5pt color2=black offset2=9pt,7pt opacity=.55
/>

</v:shape>

</v:group>

</body>
</html>

Principaux ATTRIBUTS applicables:
Type Attribut Valeur par défaut Description
direct id null Identité propre de l'ombre. Utilisée pour cibler l'ombre par une action de scripts au sein d'un ensemble d'objets.
direct on true Détermine si l'ombre est active ou non. Valeurs "t" ou "f", ou "1" ou "0" (vrai ou faux).
direct type single Prend la valeur "single | double | emboss | perspective".
direct color gray Couleur de l'ombre primaire.
direct opacity null Opacité de l'ombre. S'évalue de 0 à 1 en centésimal.
direct offset 2pt,2pt Position de l'ombre primaire par rapport à la forme de référence.
direct color2 gray Couleur de l'ombre secondaire.
direct offset2 2pt,2pt Position de l'ombre secondaire par rapport à la forme de référence.
direct origin 0,0 Position du point d'origine de perspective.
direct matrix null Formule de transformation de la perspective: "sxx, sxy, syx, syy, px, py" [ s=scale, p=perspective ].


L'ELEMENT extrusion : (développement 3D)

Créez un nouveau dessin VML en collant le code ci-dessous sur la source de vote page Web.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body bgcolor=#FDECD0>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' fillcolor=green strokeweight=12 strokecolor=navy>
<v:stroke id=contour opacity=.4 dashstyle=dash />
</v:rect>

<v:shape id=forme
style='left:-4;top:11;width:100;height:100'
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>

<v:fill id=remplissage src=Lagast1.jpg size=1,1 type=frame color=navy opacity=.5 />

<v:extrusion id=profondeur on=t type=perspective
viewpointorigin=.5,-.5 viewpoint=35mm,-35mm plane=xy
skewangle=45 skewamt=.5 foredepth=5 backdepth=300
orientation=100,0,0 orientationangle=0
lockrotationcenter=t autorotationcenter=f rotationcenter=0,0,0 rotationangle=0,10
colormode=custom color=fuchsia
shininess=4 specularity=0 diffusity=1
metal=f edge=1 facet=.01 lightface=t brightness=.5
lightposition=1,.3,1 lightlevel=.65 lightharsh=t
lightposition2=0,1,0 lightlevel2=0 lightharsh2=t
/>

</v:shape>

</v:group>

</body>
</html>


Enregistrez l'image de remplissage "Lagast1.jpg"

Principaux ATTRIBUTS applicables:
Type Attribut Valeur par défaut Description
direct id null Identité propre de l'extrusion. Utilisée pour cibler l'extrusion par une action de scripts au sein d'un ensemble d'objets.
direct on true Détermine si la forme possède une extrusion ou non. Valeurs "t" ou "f", ou "1" ou "0" (vrai ou faux).
direct type parallel Définit le type d'extrusion. Prend les valeurs: "parallel" ou "perspective".
direct render solid Définit le mode d'extrusion. Prend les valeurs: "solid", "wireframe", "boundingcube".
direct viewpointorigin .5,-.5 Définit l'origine du point de vue et la direction de la forme et de son extrusion.
direct viewpoint 35mm,-35mm Définit le point de vue de l'observateur.
direct plane xy Modifie le plan à angle droit de l'extrusion. Valeurs: "xy", "zx", "yz".
direct skewangle 45 Définit l'angle de direction d'une extrusion. Actif dans le type "parallel".
direct skewamt .5 Détermine le volume de l'oblicité de l'extrusion. Actif dans le type "parallel".
direct foredepth 0 Développement de l'extrusion vers l'avant.
direct backdepth 0 Développement de l'extrusion vers l'arrière.
direct orientation 100,0,0 Coordonnées de l'axe de rotation de la forme et de son extrusion.
direct orientationangle 0 Angle d'orientation rotative de la forme et de son extrusion.
direct lockrotationcenter true Blocage de la rotation de la forme et de son extrusion définie par l'attribut "rotationangle".
direct autorotationcenter true Détermine si le centre de rotation est le centre géométrique de l'extrusion ou non.
direct rotationcenter 0,0,0 Détermine le centre de rotation de la forme.
direct rotationangle 0,0 Détermine la rotation de la forme autour des axes x et y.
direct colormode auto Détermine le mode de coloration de l'extrusion.
Le mode "auto" attribue à l'extrusion la même couleur que le remplissage de la forme.
Le mode "custom" active une couleur indépendante définie par "color".
direct color "" Couleur de l'extrusion.
direct shininess 5 Taux de concentration de lumière réfléchie sur l'extrusion.
direct specularity 0 Taux de reflet mirroir. S'évalue de 0 à 1.
direct diffusity 0 Taux de diffusion de lumière réfléchie par l'extrusion. S'évalue de 0 à 1.
direct metal false Aspect métallique de l'extrusion.
direct edge 1pt Aspect angulaire des bords de l'extrusion.
direct facet .1 Nombre de facettes composant la surface coubée de l'extrusion. Déterminé par la largeur de chaque facette
direct lightface true Détermine si la face avant de l'extrusion répond aux changement de lumière ou non.
direct brightness .2 Indique l'intensité lumineuse d'une scène.
direct lightposition 50000,0,10000 Position de la lumière primaire de la scène.
direct lightlevel .5 Intensité de la lumière primaire de la scène.
direct lightharsh true Détermine si la source de lumière primaire est active ou non.
direct lightposition2 0,0,0 Position de la lumière secondaire de la scène.
direct lightlevel2 .5 Intensité de la lumière secondaire de la scène.
direct lightharsh2 true Détermine si la source de lumière secondaire est active ou non.


L'ELEMENT shapetype : (forme modèle)

Créez un nouveau dessin VML en collant le code ci-dessous sur la source de vote page Web.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body bgcolor=#FDECD0>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' strokecolor=red strokeweight=.5>
<v:fill type=gradientradial on=t opacity=0 color2=green focussize=.1,.1 focusposition=.5,.5 method=linear />
</v:rect>

<v:shapetype id=bulle stroked=f
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>
<v:fill id=remplissage src=Lagast1.jpg size=1,1 type=pattern opacity=O
/>
</v:shapetype>

<v:shape id=clone0 type=#bulle fillcolor=red
style='left:60;top:5;width:7;height:7'/>
<v:shape id=clone1 type=#bulle fillcolor=green
style='left:55;top:75;width:35;height:35'/>

<v:shape id=forme style='left:14;top:3;width:100;height:100' stroked=f
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>
<v:fill id=remplissage src=Lagast1.jpg size=1,1 type=frame opacity=.8 />
</v:shape>

<v:shape id=clone2 type=#bulle
style='left:3;top:11;width:35;height:35'/>
<v:shape id=clone3 type=#bulle fillcolor=teal
style='left:60;top:70;width:20;height:20'/>
<v:shape id=clone4 type=#bulle fillcolor=blue
style='left:120;top:50;width:20;height:60'/>
<v:shape id=clone5 type=#bulle fillcolor=yellow
style='left:90;top:0;width:50;height:30'/>
<v:shape id=clone6 type=#bulle fillcolor=fuchsia
style='left:30;top:35;width:18;height:18'/>
<v:shape id=clone7 type=#bulle fillcolor=black
style='left:10;top:93;width:10;height:10'/>
<v:shape id=clone8 type=#bulle fillcolor=lime
style='left:85;top:35;width:5;height:7'/>

</v:group>

</body>
</html>

La "shapetype" est une forme qui fait office de modèle pour un certain nombre de reproductions du même type.
Cette forme mère transmet les attributs "path", "fill" et "stroke" systématiquement aux formes enfants qui prennent alors l'attribut "type".
Cet attribut prend la nomination: "#" suivi de l'identificateur de la forme "shapetype".


L'ELEMENT textpath : (texte sur ligne de contour)

Créez un nouveau dessin VML en collant le code ci-dessous sur la source de vote page Web.

<html xmlns:v=VML>
<head>
<style>
v\:*{behavior:url(#default#VML)}
</style>
</head>
<body bgcolor=#504f27>

<v:group id=groupe style='width:2500;height:2500'>

<v:rect id=rect style='width:150;height:115' filled=f strokecolor=white strokeweight=.1 />

<v:shape id= forme style='left:15;top:2.9;width:100;height:100' stroked=f
path=m236,69v198,,983,-69,952,541c1179,773,938,1177,557,967,98,1114,53,900,,610xe>

<v:fill id=remplissage type=gradienttitle color=red opacity=0 color2=white focusposition=.5,.5 method=sigma />
</v:shape>

<v:shape id=ligne1 fillcolor=yellow style='Left:25;top:15;width:48;height:30'
path=m0,1024c18,346,475,27,687,16,1053,,1098,1004,1530,1105,1787,1207,2080,630,2304,625,2528,620,2790,613,2874,1075e>
<v:fill color2=#9c0 focusposition=.1,.5 focus=1 type=gradienttitle />
<v:extrusion specularity=1 diffusity=.5 backdepth=15 on=t metal=t rotationangle=0,-33 viewpoint=-5,5
viewpointorigin=-.5,.5 lightposition=0,-50000 lightposition2=0,-50000 type=perspective />
<v:path textpathok=t />

<v:textpath id=texte1 style='font-family:"Arial";font-weight:bold;font-size:70'
on=t string="Vector - Markup - Language" fitpath=t xscale=f
/>

</v:shape>

<v:shape id=ligne2 fillcolor=yellow style='left:9;top:70;width:57;height:13'
path=m0,1024c18,346,475,27,687,16,1053,,1098,1004,1530,1105,1787,1207,2080,630,2304,625,2528,620,2790,613,2874,1075e>
<v:fill color2=olive focusposition=.5,.5 focus=1 type=gradienttitle />
<v:extrusion specularity=1 diffusity=.3 backdepth=30 on=t metal=f rotationangle=0,50 viewpoint=-5,+5
viewpointorigin=.5,-.5 lightposition=-50000,0 lightposition2=0,50000 type=perspective />
<v:path textpathok=t />

<v:textpath id=texte2
style='font-family:"Arial";font-weight:bold;font-size:70;font-style:normal;font-variant:small-caps;
text-decoration:none;v-text-spacing:1;v-text-spacing-mode:tracking;text-align:justify;
v-text-kern:f;v-rotate-letters:f;v-text-reverse:f;v-same-letter-heights:t'

on=t string="For a best use !" fitshape=t fitpath=t trim=f xscale=t string=10
/>

</v:shape>
</v:group>
</body>
</html>

Principaux ATTRIBUTS applicables:
Type Attribut Valeur par défaut Description
style font null Attributs ordinaires de caractère.
style font-family null Police de caractère.
style font-weight normal Force de caractère. Valeurs: "normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900".
style font-size null Taille du caractère.
style font-style normal Style du caractère. Valeurs: "normal | italic | oblique".
style font-variant normal Valeurs: "normal | small-caps".
style text-decoration none Valeurs: "none | underline || overline || line-through || blink";
style v-text-spacing 1 Densité du caractère.
style v-text-spacing-mode tracking Valeurs: "tightening | tracking".
style v-text-align center Valeurs: "left | right | center | justify".
style v-text-align-alt letter-justify Valeurs: "letter-justify | stretch-justify".
style v-text-kern f Espacement intelligent
style v-rotate-letters f Pivote les lettres de 90°
style v-text-reverse f Inverse la disposition des rangées dans le cas du texte vertical.
style v-same-letter-heights f Etire les lettres minuscules à la taille des majuscules.
direct id null Identité propre du textpath. Utilisée pour cibler le textpath par une action de scripts au sein d'un ensemble d'objets.
direct on t Détermine si le texte est visible ou non sur le contour de la forme.
direct fitshape f Etire le texte en dehors des bords de la forme.
direct fitpath f Dimensionne le texte pour remplir le contour disponible.
direct trim f Rationne et supprime les espaces inutilisés.
direct xscale f Emploi de la mesure suivant un axe x droit plutôt que le chemin total du contour.
direct string null Utilisation du chemin vectoriel comme chemin de texte.


Les principaux éléments VML vous ont été présentés de manière à saisir la "mécanique" qui les gère.
Vous trouverez sur les liens suivants l'ensemble des éléments et leurs détails.

How to Use VML on Web Pages
The Vector Markup Language
http://web.vector.image.chez.com/index_F.html

Etape 3 >>>

Haut de page
Accueil