CSS Stroke-Dasharray Enhance SVG Strokes

Formal Syntax

stroke-dasharray =
  none
  |
  [
    [
      <length-percentage>
      | <number>
    ]+
    #
  ]

<length-percentage> =
  <length>
  | <percentage>

Explanation

• none: Means the stroke is drawn without dashes. This is the default value.
• <length-percentage>: Can be either a <length> or a <percentage>:
  • <length>: Uses units like px, em, rem, etc.
  • <percentage>: Uses percentages of the SVG viewport’s diagonal.
• <number>: Represents a number of SVG units. The size is defined by the current unit space in the SVG.
• +: Means the preceding value can appear one or more times.
• #: Means the preceding values are repeated, separated by commas.

Examples

• stroke-dasharray: none;
  • No dashes, just a solid stroke.
• stroke-dasharray: 2px, 5px;
  • Creates a pattern with dashes of 2px and gaps of 5px.
• stroke-dasharray: 20%, 50%;
  • Uses percentages to define the pattern relative to the SVG viewport.
• stroke-dasharray: 2, 5;
  • Uses unitless numbers to define the pattern.
• stroke-dasharray: 2, 5, 3;
  • Creates a pattern with dashes of 2 units, gaps of 5 units, and dashes of 3 units. The pattern repeats if necessary.
• stroke-dasharray: 2, 5, 3, 2, 5, 3;
  • Explicitly repeats the pattern to ensure an even number of values.

Basic Dash Array

HTML

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="10" width="80" height="30" fill="none" stroke="red" stroke-width="2" />
</svg>

CSS

rect {
  stroke-dasharray: 10 5;
}

Dash Array Repetition

HTML

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect x="10" y="10" width="80" height="30" fill="none" stroke="red" stroke-width="2" />
  <rect x="10" y="60" width="80" height="30" fill="none" stroke="red" stroke-width="2" />
</svg>

CSS

rect:nth-of-type(1) {
  stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5, 5, 1, 5, 5, 1;
}

Percentage and Pixel Values

HTML

<svg viewBox="0 0 100 100" width="500" height="500">
  <rect x="10" y="10" width="80" height="30" fill="none" stroke="red" stroke-width="2" />
  <rect x="10" y="60" width="80" height="30" fill="none" stroke="red" stroke-width="2" />
</svg>

CSS

rect:nth-of-type(1) {
  stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
  stroke-dasharray: 5%, 5%, 1%;
}

Specifications

The stroke-dasharray property is part of the CSS Fill and Stroke Module Level 3.

• Specification: [CSS Fill and Stroke Module Level 3]WebsiteUrl

Browser Compatibility

The stroke-dasharray property is widely supported across modern browsers.

• Chrome: Full support.
• Firefox: Full support.
• Safari: Full support.
• Opera: Full support.
• Edge: Full support.
• Internet Explorer: Supported from version 9.

Related CSS Properties

1. stroke-dashoffset: Specifies the distance into the dash pattern to start the dash.
2. stroke-linecap: Defines the shape at the end of open subpaths.
3. stroke-linejoin: Specifies the shape at the corners of paths.
4. stroke-miterlimit: Sets the limit on the ratio of the miter length to the stroke width.
5. stroke-opacity: Specifies the opacity of the stroke.
6. stroke-width: Sets the width of the stroke.

Additional Resources

• MDN Web Docs: Comprehensive documentation on CSS properties and SVG attributes.
• Can I Use: Up-to-date information on browser compatibility.
• CSS Tricks: Articles, tutorials, and best practices for CSS techniques.