Tillitsdone
down Scroll to discover
CSS stroke-miterlimit Enhance SVG Graphics
The CSS stroke-miterlimit property sets a limit on the ratio of the miter length to the stroke width, ensuring sharp corners don't result in excessively long miter joins.

Options include numbers, inherit, initial, revert, revert-layer, and unset.
thumbnail

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:

/* Numeric values */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;
/* Global values */
stroke-miterlimit: inherit;
stroke-miterlimit: initial;
stroke-miterlimit: revert;
stroke-miterlimit: revert-layer;
stroke-miterlimit: unset;

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 is 4.
  • 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 as inherit if the property is inherited, or initial if not.

Formal Definition

The formal definition of the stroke-miterlimit property includes the following details:

Initial Value4
Applies To<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
Inheritedyes
Computed Valueas specified
Animation Typeby computed value type

Formal Syntax

The formal syntax for the stroke-miterlimit property is:

stroke-miterlimit = <number>

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.

<!DOCTYPE html>
<html>
<head>
<title>CSS | stroke-miterlimit property</title>
<style>
rect {
stroke-linejoin: miter;
stroke-width: 20px;
stroke: green;
fill: none;
}
</style>
</head>
<body>
<h1 style="color: green">Website</h1>
<b>CSS | stroke-miterlimit</b>
<p>Each angle of the square is 90 degrees. Increasing the miter limit progressively converts the miter joints to bevel ones.</p>
<div class="container">
<svg width="500px" height="200px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="100" height="100" stroke-miterlimit="1"/>
<text x="40" y="150">stroke-miterlimit: 1</text>
<rect x="250" y="20" width="100" height="100" stroke-miterlimit="2"/>
<text x="240" y="150">stroke-miterlimit: 2</text>
</svg>
</div>
</body>
</html>

Example 2: Triangle Shapes

This example shows how the stroke-miterlimit property affects the appearance of triangle shapes with different miter limits.

<!DOCTYPE html>
<html>
<head>
<title>CSS | stroke-miterlimit property</title>
<style>
polygon {
stroke-linejoin: miter;
stroke-width: 8px;
stroke: green;
fill: none;
}
</style>
</head>
<body>
<h1 style="color: green">Website</h1>
<b>CSS | stroke-miterlimit</b>
<p>Each of the triangles has two angles equal to 24 degrees and one angle equal to 130 degrees. Increasing the miter limit progressively converts the miter joints to bevel ones.</p>
<div class="container">
<svg width="500px" height="200px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="20, 20 150, 20 85, 80" stroke-miterlimit="1"/>
<text x="30" y="100">stroke-miterlimit: 1</text>
<polygon points="170, 20 300, 20 235, 80" stroke-miterlimit="2"/>
<text x="180" y="100">stroke-miterlimit: 2</text>
<polygon points="320, 20 450, 20 385, 80" stroke-miterlimit="3"/>
<text x="330" y="100">stroke-miterlimit: 3</text>
</svg>
</div>
</body>
</html>

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).

<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path
d="M1,5 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" />
<path
d="M1,12 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" />
<path
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" />
<path
d="M1,26 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" />
<path
d="M1,33 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" />
</g>
</svg>
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.

path:nth-child(1) {
stroke-miterlimit: 1.1;
}
path:nth-child(2) {
stroke-miterlimit: 1.4;
}
path:nth-child(3) {
stroke-miterlimit: 1.9;
}
path:nth-child(4) {
stroke-miterlimit: 4.2;
}
path:nth-child(5) {
stroke-miterlimit: 6.1;
}

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
Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.