Search code examples
svgjquery-svg

Dashtype line in svg path

i want to create dash type line in svg using path. how can i apply dash style to svg path to make a dashed line. Please refer below SVG.

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.633333333333333 -112.12499999999999 M 21.633333333333333 -112.12499999999999 L 43.266666666666666 -51.75 M 43.266666666666666 -51.75 L 86.53333333333333 -25.875 M 86.53333333333333 -25.875 L 108.16666666666666 -155.25 "></path>

Thanks,

Siva

Solution

  • You are looking for the stroke-dasharray property:

    <path 
  id="container_svg_John_0" 
  fill="none" 
  stroke-width="3" 
  stroke="url(#container_svg_John0Gradient)" 
  stroke-linecap="butt" 
  stroke-linejoin="round" 
  stroke-dasharray="10,10"
  d="M 0 -17.25 L 21.633333333333333 -112.12499999999999 M 21.633333333333333 -112.12499999999999 L 43.266666666666666 -51.75 M 43.266666666666666 -51.75 L 86.53333333333333 -25.875 M 86.53333333333333 -25.875 L 108.16666666666666 -155.25 "></path>

    It takes a comma separated value that represents solid,void. Interesting side note: If you have an odd number of values in the array, when it goes to repeat, the pattern is reversed, i.e the first value is now a void, second is a solid.

    stroke-dasharray="10,5,10" is the same as stroke-dasharray="10,5,10,10,5,10"