Utilisation de l’élément Stroke
cette rubrique décrit VML, une fonctionnalité déconseillée à partir de Windows Internet Explorer 9. Les pages Web et les applications qui reposent sur VML doivent être migrées vers SVG ou d’autres normes largement prises en charge.
Notes
Depuis le 2011 décembre, cette rubrique a été archivée. Par conséquent, il n’est plus activement conservé. Pour plus d’informations, consultez contenu archivé. pour obtenir des informations, des recommandations et des conseils relatifs à la version actuelle de Windows internet explorer, consultez le centre de développement internet explorer.
Utilisation de <stroke>
Comme vous l’avez appris, vous pouvez utiliser les attributs de propriété StrokeColor et StrokeWeight d’une forme prédéfinie, telle que <oval> , <line> ,,, <polyline> <curve> <rect> , <roundrect> , <arc> --pour spécifier la couleur et le poids du contour d’une forme. Dans cette rubrique, nous allons illustrer comment dessiner une forme avec un contour plus avancé.
Vous pouvez placer le <stroke> sous-élément à l’intérieur de <shape> , ou <shapetype> , ou n’importe quel élément de forme prédéfini pour décrire comment dessiner le contour de la forme. Vous pouvez ensuite utiliser les attributs de propriété (par exemple, DashStyle, Opacity, LineStyle, joinstyle, fillType ) du <stroke> sous-élément pour personnaliser le plan.
DashStyle
Vous pouvez utiliser l’attribut de propriété DashStyle du <stroke> sous-élément pour dessiner un contour avec différents styles de tirets.
Exemples :
Si vous spécifiez <v:stroke dashstyle="solid" /> à l’intérieur de l' <line> élément, vous pouvez créer une ligne pleine, comme illustré dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="solid" />
</v:line>
Si vous modifiez l’attribut de propriété DashStyle en « dot », vous pouvez créer une ligne en pointillés, comme illustré dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dot" />
</v:line>
Si vous modifiez l’attribut de propriété DashStyle en « Dash », vous pouvez créer une ligne de tirets, comme indiqué dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dash" />
</v:line>
Si vous modifiez l’attribut de propriété DashStyle en « tiret point », vous pouvez créer une ligne avec un style en pointillés et en pointillés, comme illustré dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dashdot" />
</v:line>
Si vous modifiez l’attribut de propriété DashStyle en « longdash », vous pouvez créer une ligne avec un style Dash long, comme illustré dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="longdash" />
</v:line>
Si vous modifiez l’attribut de propriété DashStyle en « longdashdot », vous pouvez créer une ligne avec un style tirets longs et pointillés, comme illustré dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="longdashdot" />
</v:line>
Si vous placez <v:stroke dashstyle="dashdot" /> à l’intérieur de l' <rect> élément, vous pouvez créer un rectangle avec une bordure en pointillés et en pointillés, comme illustré dans la représentation VML suivante :

<v:rect style='width:100pt;height:80pt' strokecolor="red" strokeweight="2pt"/>
<v:stroke dashstyle="dashdot" />
</v:rect>
opacity
Vous pouvez utiliser l’attribut de propriété Opacity du <stroke> sous-élément pour dessiner un contour avec différents styles d’opacité. La valeur de l’attribut de propriété Opacity peut être n’importe quel nombre compris entre 0 et 1. Par défaut, il s’agit de 1, ce qui indique une opacité totale.
Exemples :
La représentation VML suivante crée une ligne avec une opacité complète :

<v:line style='position:relative;' from="20pt,50pt" to="200pt,50pt" strokecolor="red"
strokeweight="2pt">
</v:line>
Si vous ajoutez <v:stroke opacity="0.5" /> à l’intérieur de l' <line> élément, vous pouvez créer une ligne avec une opacité de 50%, comme indiqué dans la représentation VML suivante :

<v:line style='position:relative;' from="20pt,50pt" to="200pt,50pt" strokecolor="red"
strokeweight="2pt">
<v:stroke opacity="0.5" />
</v:line>
LineStyle
Vous pouvez utiliser l’attribut de propriété LineStyle du <stroke> sous-élément pour dessiner un plan avec différents styles de ligne.
Exemples :
Si vous spécifiez <v:stroke linestyle="single" /> à l’intérieur de l' <rect> élément, vous pouvez créer un rectangle avec un seul plan, comme indiqué dans la représentation VML suivante :

<v:rect style='width:120pt;height:80pt' strokecolor="red" strokeweight="10pt">
<v:stroke linestyle="single" />
</v:rect>
Si vous modifiez l’attribut de propriété LineStyle en « thinthin », vous pouvez créer un rectangle avec le contour (1:1:1), comme indiqué dans la représentation VML suivante :

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thinthin" />
</v:rect>
Si vous modifiez l’attribut de propriété LineStyle en « thinthick », vous pouvez créer un rectangle avec le contour (1:1:2), comme indiqué dans la représentation VML suivante :

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thinthick" />
</v:rect>
Si vous modifiez l’attribut de propriété LineStyle en « thickthin », vous pouvez créer un rectangle avec le contour (2:1:1), comme indiqué dans la représentation VML suivante :

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thickthin" />
</v:rect>
Si vous modifiez l’attribut de propriété LineStyle en « thickbetweenthin », vous pouvez créer un rectangle avec le contour (1:1:2:1:1), comme indiqué dans la représentation VML suivante :

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thickbetweenthin" />
</v:rect>
joinstyle
Vous pouvez utiliser l’attribut joinstyle du <stroke> sous-élément pour définir la manière dont les lignes sont jointes.
Par exemple, pour créer une forme qui a la structure de jointures circulaires, comme indiqué dans l’illustration suivante, vous pouvez spécifier <v:stroke joinstyle="round" /> à l’intérieur de l' <polyline> élément, comme indiqué dans la représentation VML suivante :

<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="round" />
</v:polyline>
Si vous modifiez l’attribut de propriété joinstyle en « biseau », vous pouvez créer une forme qui a le contour biseau-Join, comme illustré dans la représentation VML suivante :

<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="bevel" />
</v:polyline>
Si vous affectez à l’attribut de propriété joinstyle la valeur « Mitre », vous pouvez créer une forme qui a la structure de jointure Mitre, comme illustré dans la représentation VML suivante :

<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="miter" />
</v:polyline>
fillType
Vous pouvez utiliser l’attribut de propriété fillType du <stroke> sous-élément pour dessiner un contour avec divers effets de remplissage.
Exemples :
Si vous spécifiez <v:stroke filltype="solid" /> à l’intérieur de l' <roundrect> élément, vous pouvez créer un rectangle à coins arrondis avec le contour plein, comme indiqué dans la représentation VML suivante :

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="solid" />
</v:roundrect>
Si vous modifiez l’attribut de propriété fillType en « pattern », que vous pointez l’attribut de propriété src sur l’emplacement du fichier d’image de modèle et que vous définissez l’attribut de propriété color2 sur la deuxième couleur du motif, vous pouvez créer un rectangle arrondi avec une structure de motif, comme illustré dans la représentation VML suivante :

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="pattern" src="image.gif"
color2="green" />
</v:roundrect>
Si vous modifiez l’attribut de propriété fillType en « vignette » et que vous pointez l’attribut de propriété src sur l’emplacement du fichier image, vous pouvez créer un rectangle à coins arrondis avec un contour en mosaïque, comme illustré dans la représentation VML suivante :

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="tile" src="image2.gif" />
</v:roundrect>
Si vous modifiez l’attribut de propriété fillType en « Frame » et que vous pointez l’attribut de propriété src sur l’emplacement du fichier image, vous pouvez créer un rectangle à coins arrondis avec un contour d’image, comme illustré dans la représentation VML suivante :

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="frame" src="image2.gif" />
</v:roundrect>
Pour plus d’informations sur cet élément, consultez la spécification VML .
en haut