당신은 d 속성의 값을 연결하여 하나에 두 개의 경로를 병합 할 수 있습니다 :
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2" />
그것을 두 개의 M 요소를 가지고 있기 때문에, 두 번 애니메이션을 시작합니다. 당신은 하나의 연속 경로로로 병합 할 경우, 시도 :
<path d="M11.25 59.5C32.55 46.62 44.69 28.76 50.45 19.62C51.73 17.59 52.5 16.28 54.5 19.25
C61.23 26.55 78.59 44.06 87.45 51.16C90.18 53.34 93.06 54.96 96.5 55.75" style="fill:none;stroke:black;stroke-width:2">
<animate attributeName="stroke-dasharray" values="0,200;200,200" begin="0s" dur="5s" /></path>
편집 : 나는 생각
OK 내가 지금 원하는 것을 참조하십시오. 나는 새로운 대시 배열을 시작하고 애니메이션에 영향을 줄 때 여러 개의 M 명령으로 단일 경로를 사용하여 작동한다고 생각하지 않습니다. 하나의 결합 된 경로를 사용하여 시도해 볼 수도 있고 원하지 않는 비트 위에 흰색 상자를 그릴 수도 있지만 그다지 이상적은 아닙니다.
이 일종의 내가 생각하는 효과를 얻을 후 위치 : 그것은 또한 당신이 라인의 길이에 따라 대시 배열의 길이를 변경해야합니다으로 이상적이지의
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
<path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" style="fill:none;stroke:black;stroke-width:2">
<animate id="animate1" attributeName="stroke-dasharray" from="0,60" to="60,60" begin="0s" dur="5s"/></path>
<path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" style="fill:none;stroke:black;stroke-width:2;stroke-dasharray:0,80">
<animate attributeName="stroke-dasharray" from="0,80" to="80,80" begin="animate1.end" dur="5s" fill="freeze"/></path>
</svg>
. 나는 그것을 60으로 줄였습니다. 그렇지 않으면 하나의 애니메이션이 시작될 때와 다른 애니메이션이 끝날 때 사이에 큰 멈춤이 생깁니다 (또는 오히려 없습니다. 그러나 대시의 길이를 늘리려고 계속하기 때문에 존재하는 것처럼 보입니다. 이미 선을 채 웁니다.)
첫 번째 경로는 내가 무엇을 찾고 있었다 거의이지만, 어떻게 (을 연결하지 않고)이 두 라인 각 하나씩을 그릴 수 있습니까? – maxagaz
좋아, 내가 원하는대로 해줄 내 대답을 편집했지만 이상적이지는 않다. –