Dashtype line in svg path

Question

Я хочу создать тире в строке svg, используя путь. как я могу применить стиль тире к пути SVG, чтобы сделать пунктирную линию. См. Ниже 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> 

Спасибо,

Siva

Answer 1

Вы ищете stroke-dasharray собственности:

<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> 

Он принимает запятую значение, которое представляет твердый, аннулируются. Интересное примечание: если у вас есть нечетное количество значений в массиве, когда он переходит к повторению, шаблон меняется на противоположное, то есть первое значение теперь пустое, второе - твердое.

stroke-dasharray="10,5,10" такое же, как stroke-dasharray="10,5,10,10,5,10"