Skip to content
Related Articles

Related Articles

Improve Article

CSS | stroke-dashoffset Property

  • Last Updated : 21 Nov, 2019

The stroke-dashoffset property is used to set the location along an SVG path where the dash pattern of a stroke will begin. A higher value means that the dash will start at a further location.

Syntax:

stroke-dasharray: <length> | <percentage>

Property Values:

  • length: It is used to set the offset in length units. The values are resolved on the basis of the path length of the element.

    Example 1: Setting the offset of the dashes in lines.






    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | stroke-dashoffset
      </title>
      <style>
        .stroke1 {
          stroke-dashoffset: 0;
      
          stroke: green;
          stroke-dasharray: 40;
          stroke-width: 20px;
        }
      
        .stroke2 {
          stroke-dashoffset: 15px;
      
          stroke: red;
          stroke-dasharray: 40;
          stroke-width: 20px;
        }
      
        .stroke3 {
          stroke-dashoffset: 30px;
      
          stroke: orange;
          stroke-dasharray: 40;
          stroke-width: 20px;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | stroke-dashoffset
      </b>
      <div class="container">
        <svg width="400px"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1">
          <line class="stroke1" x1="0"
            x2="350" y1="20" y2="20" />
          <line class="stroke2" x1="0"
            x2="350" y1="70" y2="70" />
          <line class="stroke3" x1="0"
            x2="350" y1="120" y2="120" />
        </svg>
      </div>
    </body>
    </html>

    Output:
    using-lines

    Example 2: Setting the offset of the dashes in circles.




    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | stroke-dashoffset
      </title>
      <style>
        .stroke1 {
          stroke-dashoffset: 0;
      
          stroke: green;
          stroke-dasharray: 40;
          stroke-width: 10px;
        }
      
        .stroke2 {
          stroke-dashoffset: 15px;
      
          stroke: red;
          stroke-dasharray: 40;
          stroke-width: 10px;
        }
      
        .stroke3 {
          stroke-dashoffset: 30px;
      
          stroke: orange;
          stroke-dasharray: 40;
          stroke-width: 10px;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | stroke-dashoffset
      </b>
      <div class="container">
        <svg width="500px" height="250px"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1">
          <circle class="stroke1" cx="100"
            cy="100" r="50"/>
          <circle class="stroke2" cx="250"
            cy="100" r="50"/>
          <circle class="stroke3" cx="400"
            cy="100" r="50"/>
        </svg>
      </div>
    </body>
    </html>

    Output:
    using-circles

  • percentage: It is used to set the offset in percentage values. The values are resolved as a percentage of the current viewport.

    Example: Setting the offset of the dashes in lines.




    <!DOCTYPE html>
    <html>
    <head>
      <title>
        CSS | stroke-dashoffset
      </title>
      <style>
        .stroke1 {
          stroke-dashoffset: 0%;
      
          stroke: green;
          stroke-dasharray: 40;
          stroke-width: 20px;
        }
      
        .stroke2 {
          stroke-dashoffset: 50%;
      
          stroke: red;
          stroke-dasharray: 40;
          stroke-width: 20px;
        }
      
        .stroke3 {
          stroke-dashoffset: 100%;
      
          stroke: orange;
          stroke-dasharray: 40;
          stroke-width: 20px;
        }
      </style>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        CSS | stroke-dashoffset
      </b>
      <div class="container">
        <svg width="400px"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1">
          <line class="stroke1" x1="0"
            x2="350" y1="20" y2="20" />
          <line class="stroke2" x1="0"
            x2="350" y1="70" y2="70" />
          <line class="stroke3" x1="0"
            x2="350" y1="120" y2="120" />
        </svg>
      </div>
    </body>
    </html>

    Output:
    percentage-lines

Supported Browsers: The browsers supported by stroke-dashoffset property are listed below:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9



My Personal Notes arrow_drop_up
Recommended Articles
Page :