mozilla

Revision 239057 of stroke-miterlimit

  • Revision slug: SVG/Attribute/stroke-miterlimit
  • Revision title: stroke-miterlimit
  • Revision id: 239057
  • Created:
  • Creator: Hakim_Syafiq
  • Is current revision? No
  • Comment 1 words added, 1 words removed

Revision Content

« SVG Attribute reference home

When two line segments meet at a sharp angle and miter joins have been specified for {{ SVGAttr("stroke-linejoin") }}, it is possible for the miter to extend far beyond the thickness of the line stroking the path. The stroke-miterlimit imposes a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }}. When the limit is exceeded, the join is converted from a miter to a bevel.

The ratio of miter length (distance between the outer tip and the inner corner of the miter) to {{ SVGAttr("stroke-width") }} is directly related to the angle (theta) between the segments in user space by the formula:

miterLength / stroke-width = 1 / sin ( theta / 2 )

For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.

Usage context

Categories Presentation attribute
Value <miterlimit> | inherit
Initial value 6
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
<miterlimit>
The limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }}. The value of <miterlimit> must be a <number> greater than or equal to 1.

Example

Elements

The following elements can use the stroke-miterlimit attribute

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>When two line segments meet at a sharp angle and <code>miter</code> joins have been specified for {{ SVGAttr("stroke-linejoin") }}, it is possible for the miter to extend far beyond the thickness of the line stroking the path. The <code>stroke-miterlimit</code> imposes a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }}. When the limit is exceeded, the join is converted from a miter to a bevel.</p>
<p>The ratio of miter length (distance between the outer tip and the inner corner of the miter) to {{ SVGAttr("stroke-width") }} is directly related to the angle (theta) between the segments in user space by the formula:</p>
<pre>miterLength / stroke-width = 1 / sin ( theta / 2 )
</pre>
<p>For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td>&lt;miterlimit&gt; | inherit</td> </tr> <tr> <th scope="row">Initial value</th> <td>6</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>&lt;miterlimit&gt;</dt> <dd>The limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }}. The value of &lt;miterlimit&gt; must be a <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a> greater than or equal to 1.</dd>
</dl>
<h2>Example</h2>
<h2>Elements</h2>
<p>The following elements can use the <code>stroke-miterlimit</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
</ul>
Revert to this revision