diff options
Diffstat (limited to 'files/fr/web/svg/attribute/stroke-miterlimit/index.md')
| -rw-r--r-- | files/fr/web/svg/attribute/stroke-miterlimit/index.md | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.md b/files/fr/web/svg/attribute/stroke-miterlimit/index.md new file mode 100644 index 0000000000..f1dfd341e8 --- /dev/null +++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.md @@ -0,0 +1,114 @@ +--- +title: stroke-miterlimit +slug: Web/SVG/Attribute/stroke-miterlimit +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-miterlimit +--- +<div>{{SVGRef}}</div> + +<p>L'attribut <strong><code>stroke-miterlimit</code></strong> définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la <a href="/fr/docs/Web/SVG/Attribute/stroke-linejoin">liaison entre deux segments de ligne</a>. Quand la limite est dépassée, la liaison passe du type <em>miter</em> (pointu) au type <em>bevel</em> (biseauté).</p> + +<div class="note"> + <p><strong>Note:</strong> L'attribut <code>stroke-miterlimit</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +</div> + +<p>Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> + +<pre class="brush: html"><svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> + <!-- Impact du miterlimit par défaut --> + <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" + d="M1,9 l7 ,-3 l7 ,3 + m2,0 l3.5 ,-3 l3.5 ,3 + m2,0 l2 ,-3 l2 ,3 + m2,0 l0.75,-3 l0.75,3 + m2,0 l0.5 ,-3 l0.5 ,3" /> + + <!-- Impact du miterlimit le plus petit (1) --> + <path stroke="black" fill="none" stroke-linejoin="miter" + stroke-miterlimit="1" id="p2" + d="M1,19 l7 ,-3 l7 ,3 + m2, 0 l3.5 ,-3 l3.5 ,3 + m2, 0 l2 ,-3 l2 ,3 + m2, 0 l0.75,-3 l0.75,3 + m2, 0 l0.5 ,-3 l0.5 ,3" /> + + <!-- Impact d'un large miterlimit (8) --> + <path stroke="black" fill="none" stroke-linejoin="miter" + stroke-miterlimit="8" id="p3" + d="M1,29 l7 ,-3 l7 ,3 + m2, 0 l3.5 ,-3 l3.5 ,3 + m2, 0 l2 ,-3 l2 ,3 + m2, 0 l0.75,-3 l0.75,3 + m2, 0 l0.5 ,-3 l0.5 ,3" /> + + <!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait --> + <path stroke="pink" fill="none" stroke-width="0.05" + d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 + M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 + M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> +</svg></pre> + +<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> + +<p>Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut <code>miter</code>, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio <code>stroke-miterlimit</code> est utilisé pour définir une limite à partir de laquelle la liaison est convertie de <em>miter</em> à <em>bevel</em>.</p> + +<p>Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:</p> + +<p><math> <mstyle displaystyle="true"> <mi><code>stroke-miterlimit</code></mi> <mo>=</mo> <mfrac> <mrow> <mi>miterLength</mi> </mrow> <mrow> <mi><code>stroke-width</code></mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <mrow> <mi>sin</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>θ</mo> </mrow> <mrow> <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mrow> </mfrac> </mstyle> </math></p> + +<p>Par exemple, une limite de 1.414 convertit une liaison <em>miter</em> en <em>bevel</em> pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.</p> + +<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td>4</td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> +</table> + +<p>La valeur de <code>stroke-miterlimit</code> doit être supérieure ou égale à 1.</p> + +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("svg.attributes.presentation.stroke-miterlimit")}}</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Définition pour les formes et le texte</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour les formes et le texte</td> + </tr> + </tbody> +</table> |