rick@tillitsdone.com

+66824564755

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.

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 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:

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.

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep 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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms

CSS stroke-miterlimit Enhance SVG Graphics

Syntax

Values

Formal Definition

Formal Syntax

Examples

Example 1: Square Shapes

Example 2: Triangle Shapes

Example 3: Various Miter Limits

HTML

CSS

Specifications

Browser Compatibility

See Also

Talk with CEO