From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/svg/attribute/stroke-dasharray/index.html | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/fr/web/svg/attribute/stroke-dasharray/index.html (limited to 'files/fr/web/svg/attribute/stroke-dasharray/index.html') diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.html b/files/fr/web/svg/attribute/stroke-dasharray/index.html new file mode 100644 index 0000000000..e082fc487e --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.html @@ -0,0 +1,89 @@ +--- +title: stroke-dasharray +slug: Web/SVG/Attribute/stroke-dasharray +tags: + - Attribut SVG + - SVG +translation_of: Web/SVG/Attribute/stroke-dasharray +--- +

L'attribut stroke-dasharray contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. 

+ +

Note: Comme il s'agit d'un attribut de présentation, stroke-dasharray peut aussi être utilisé directement dans une feuille de style CSS.

+ +

Les éléments suivants peuvent utiliser l'attribut stroke-dasharray: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +

Exemple

+ + + +
<svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+    <line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" />
+    <line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" />
+    <line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" />
+    <line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" />
+    <line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" />
+</svg>
+
+ +

{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}

+ +

Contexte d'usage

+ + + + + + + + + + + + + + + + + + + + +
CatégoriesAttribut de présentation
Valeurnone | <dasharray> | inherit
AnimableOui
Document normatifSVG 1.1 (2nd Edition)
+ +
+
<dasharray>
+
Il s'agit d'une liste de mesures <length> et <percentage> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, 5,3,2 sera rendu comme 5,3,2,5,3,2.
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("svg.attributes.presentation.stroke-dasharray")}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}{{Spec2("SVG2")}}Définition pour les formes et textes
{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}{{Spec2("SVG1.1")}}Définition initiale pour les formes et textes
-- cgit v1.2.3-54-g00ecf