The CSS stroke-dashoffset property is used to define the location along a SVG path where the dash of a stroke will begin. The larger the number, the further along the dash will begin

.class {
  stroke-dashoffset: 10;

This CSS would overwrite a SVG attribute, but not an inline style (therefore avoid using inline styles on SVG).

// Overrules this
< line stroke-dashoffset="50" />

// But not this
< line style="stroke-dashoffset: 50"; />

Values can be a % or number. Units (em and px) are not required, if undefined it will be rendered in pixel units. Percentage is relative to the % of the viewport.

stroke-dashoffset: 100;
stroke-dashoffset: 25%;
stroke-dasharray: 2em;
stroke-dasharray: 20%;

In order to make an SVG shape appear that it’s drawing itself, there’s a trick that uses stroke-dasharray in conjunction with stroke-dashoffset. You can view this post for more information on that.




Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.