Options include numbers, inherit, initial, revert, revert-layer, and unset.
Syntax
The stroke-miterlimit
CSS property is easy to use. It accepts numerical values that define the limit on the ratio of the miter length to the stroke width. Here is the basic syntax:
Values
The stroke-miterlimit
property can take the following values:
- Number: Any real positive number equal to or greater than
1
. Values below that are invalid. The initial value is4
. - Global values:
inherit
: Inherits the value from the parent element.initial
: Sets the property to its default value.revert
: Rolls back the value to the default value as specified by the user agent.revert-layer
: Rolls back the value to the value specified in the previous cascade layer.unset
: Resets the property to its natural value, which means it acts asinherit
if the property is inherited, orinitial
if not.
Formal Definition
The formal definition of the stroke-miterlimit
property includes the following details:
Initial Value | 4 |
---|---|
Applies To | <circle> , <ellipse> , <line> , <path> , <polygon> , <polyline> , and <rect> elements in an svg |
Inherited | yes |
Computed Value | as specified |
Animation Type | by computed value type |
Formal Syntax
The formal syntax for the stroke-miterlimit
property is:
Where <number>
represents any positive real number greater than or equal to 1
.
Examples
Example 1: Square Shapes
This example shows how the stroke-miterlimit
property affects the appearance of square shapes with different miter limits.
Example 2: Triangle Shapes
This example shows how the stroke-miterlimit
property affects the appearance of triangle shapes with different miter limits.
Example 3: Various Miter Limits
This example demonstrates the effect of different values for the stroke-miterlimit
property.
HTML
We set up five multi-segment paths, all of which use a black stroke with a width of one, and no fill. Each path creates a series of mountain symbols, going from left (a shallow corner angle) to right (an extreme corner angle).
CSS
We apply increasingly large values of stroke-miterlimit
to the paths, such that for the first path, only the first (leftmost) subpath is mitered; for the second path, the first two subpaths are mitered; and so on until for the fifth path, all five subpaths are mitered.
Specifications
The stroke-miterlimit
property is defined in the CSS Fill and Stroke Module Level 3. This specification outlines the rules and guidelines for controlling the appearance of SVG graphics, including how strokes and fills are applied to shapes. The stroke-miterlimit
property is a key component of this module, as it helps manage the appearance of miter joins in stroked paths.
By adhering to the specifications, web developers and designers can ensure that their SVG graphics are rendered consistently across different browsers and platforms. This consistency is crucial for maintaining the visual integrity of web designs and providing a seamless user experience.
Browser Compatibility
The stroke-miterlimit
property is supported by all modern web browsers, including Google Chrome, Firefox, Opera, and Internet Explorer 9. This wide support ensures that your SVG graphics will display correctly for the vast majority of users, regardless of their browser choice.
See Also
For more information on related CSS properties, you can refer to the following:
- [
stroke-dasharray
]WebsiteUrl - [
stroke-dashoffset
]WebsiteUrl - [
stroke-linecap
]WebsiteUrl - [
stroke-linejoin
]WebsiteUrl - [
stroke-opacity
]WebsiteUrl - [
stroke-width
]WebsiteUrl - [
stroke
]WebsiteUrl - SVG
[stroke-miterlimit]WebsiteUrl
attribute
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.