노란색-svg-경로 애니메이션

Question

.arrow{
  너비: 45px;
  높이: 25px;
  클립 경로: 다각형(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  배경: 녹색;
  위치: 절대;
  상단: 0;
  왼쪽: 0;
  오프셋 경로: 경로("M304 2C304 9 304 16 304 23C304 27.7274 306 31.2947 306 36C306 41.7305 308 47.4234 308 53C308 56.8769 309 60.5287 309 64.5C309 69.0286 306.737 68 302.778 68C291.444 68 280.111 68 268.778 68C253.531 68 238.361 72 223 72C217. 772 72 212.751 72.678 207.556 72.9444C204.436 73.1044 199.112 71.9994 196.556 74.5556C194.211 76.9005 195 81.9959 195 85C1 95 100.333 195 115.667 195 131C195 134.167 195 137.333 195 140.5C195 142 195 143.5 195 145C195 145.758 194.846 146.71 195.05 6 147.444C195.202 147.957 197.089 148 196.556 148C189.63 148 182.704 148 175.778 148C153.185 148 130.593 148 108 148C83.7123 148 59.2805 145.714 35 145C31.266 144.89 .3082 144.53 22.5 143.944C19.5895 143.497 12.9189 143.888 10.7778 142.222C9.9328 141.565 8.08918 153.439 7.49999 154.5C5.237 71 158.572 8.0384 164.541 5.99999 169C3.84153 173.722 2.99999 183.142 2.99999 188.5C2.99999 194.765 4.14255 202.303 2.77777 208.444C1.4407 14.461 1.99999 220.799 1.99999 226.944C1.99999 231.946 2.29047 232 7.22221 232C45.8889 232 84.5555 232 123.222 232C177.667 2 32 232.111 232 286.556 232C314.863 232 343.682 230.584 372 232C375.676 232.184 374 253.525 374 257.222C374 267.587 371 277.175 371 287.444C371 294.63 371 301 .815 371 309C371 316.333 371 323.667 371 331C371 339.764 360.794 335 355 335C308 335 261 335 214 335 M193 149C197.514 149 201 .976 148.163 206.222 148C213.115 147.735 219.646 145 226.5 145C247.333 145 268.167 145 289 145C304.833 145 320.667 145 336.5 145C341.685 145 346.87 145 352 .056 145C355.722 145 371.604 146.792 373 144");

  애니메이션: Followpath 12s 선형 무한
}
@keyframes 팔로우 경로{
  에게{
    오프셋 거리: 100%;
  }
}

<div class="container">
  <div class="arrow"></div>
  <svg xmlns="http://www.w3.org/2000/svg" width="376" height="338" viewBox="0 0 376 338" fill="none">
<Rect width="376" height="338" fill="#F5F5F5"/>
    <정의>
    <marker orient="auto" refY="0" refX="0" id="tri" style="overflow:visible">
      </마커>
    </defs>
<경로 d="M304 2C304 9 304 16 304 23C304 27.7274 306 31.2947 306 36C306 41.7305 308 47.4234 308 53C308 56.8769 309 60.5287 309 64.5C309 69.0286 306.737 68 302.778 68C291.444 68 280.111 68 268.778 68C253.531 68 238.361 72 223 72C217.772 72 212.751 72.678 207.556 72.9444C204.436 73.1044 199.112 71.9994 196.556 74.5556C194.211 76.9005 195 81.9959 195 85C195 00.333 195 115.667 195 131C195 134.167 195 137.333 195 140.5C195 142 195 143.5 195 145C195 145.758 194.846 146.71 195.056 7.444C195.202 147.957 197.089 148 196.556 148C189 .63 148 182.704 148 175.778 148C153.185 148 130.593 148 108 148C83.7123 148 59.2805 145.714 35 145C31.266 144.89 26.3082 44.53 22.5 143.944C19.5895 143.497 12.9189 143.888 10.7778 142.222C9.9328 141.565 8.08918 153.439 7.49999 154.5C5.23771 572 8.0384 164.541 5.99999 169C3.84153 173.722 2.99999 183.142 2.99999 188.5C2.99999 194.765 4.14255 202.303 2.77777 208.444C1.4407 214.461 .99999 220.799 1.99999 226.944C1.99999 231.946 2.29047 232 7.22221 232C45.8889 232 84.5555 232 123.222 232C177.667 232 232.1 11 232 286.556 232C314.863 232 343.682 230.584 372 232C375.676 232.184 374 253.525 374 257.222C374 267.587 371 277.175 371 287.444C371 294.63 371 301.815 371 309C371 316.333 371 323.667 371 331C371 339.764 360.794 335 355 335C308 335 261 335 214 335" 스트로크="검정색" 스트로크 폭="3 " 스트로크-라인캡="라운드"/>
<경로 d="M193 149C197.514 149 201.976 148.163 206.222 148C213.115 147.735 219.646 145 226.5 145C247.333 145 268.167 145 289 14 5C304.833 145 320.667 145 336.5 145C341.685 145 346.87 145 352.056 145C355.722 145 371.604 146.792 373 144 " 스트로크-라인캡="라운드" 스트로크-라인조인="라운드" marker-end="없음" />
</svg>
</div>

저희는 이전의 경로에서 더 이상 사용할 수 없는 방식으로 공유하고 있습니다.覆盖了整个矢weight저지텐시 량은 매우 많습니다.

Answer 1

무슨 말인지 완전히 이해하지 못하지만(특히 "노란색"과 벡터 부분) 화살표 뒤에 선을 그리려면 CSS 애니메이션과 스트로크-다샤레이 및 스트로크 속성을 사용하여 수행할 수 있습니다. 대시 오프셋.

올바른 경로 길이를 알고/추측하고 (화살표 및 경로) 애니메이션의 지속 시간을 동일하게 유지하면 됩니다.

여기에 깨끗한 데모가 있습니다:
(완벽하지는 않지만 작동합니다)

으아악 으아악