svg 경로의 Dashtype 라인

Question

경로를 사용하여 svg에 대시 유형 라인을 만들고 싶습니다. 어떻게 대시 스타일을 적용하여 점선을 만들 수 있습니까? 아래의 SVG를 참조하십시오. 당신은 stroke-dasharray 재산을 찾고 있습니다

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

감사합니다,

시바

Answer 1

는 :

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

이 무효, 고체 나타내는 쉼표로 구분 된 값을 사용합니다. 재미있는 부가 메모 : 배열에 홀수 개의 값이있는 경우 반복 할 때 패턴이 반전됩니다. 즉, 첫 번째 값은 이제 void이며 두 번째는 단색입니다.

stroke-dasharray="10,5,10"은 stroke-dasharray="10,5,10,10,5,10"

과 동일합니다.