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.