黄色の SVG パスのアニメーション

Question

.arrow{
  幅: 45ピクセル;
  高さ: 25px;
  クリップパス: ポリゴン(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  背景: 緑;
  位置: 絶対;
  トップ: 0;
  左: 0;
  オフセットパス: path("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 85C19 5 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.056 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 26。 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.23771 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 21 4.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 232 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.9 76 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"/>
    <defs>
    <marker orient="auto" refY="0" refX="0" id="tri" style="overflow:visible">
      </マーカー>
    </defs>
<path 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 6 4.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 10 0.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 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 26.3082 14 4.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 158.57 2 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.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" ストローク="黒" ストローク幅="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 145 C304.833 145 320.667 145 336.5 145C341.685 145 346.87 145 352.056 145C355.722 145 371.604 146.792 373 144 " ストローク-linecap="round" ストローク-linejoin="round" marker-end="none" />
</svg>
</div>

私が想う箭開始前の経路は不可視であるが、現在この経路を通過する場合、経路はこの時間の経路の色が黄であると同時に、全体のベクトル量を覆っている後のベクトルも同様であると見なすことができる

これは、私たちがこれを実現できるベクトルです。

Answer 1

何を言っているのかよくわかりませんが（特に「黄色」とベクターの部分）、矢印の後ろに線を描きたいだけなら、CSSアニメーションとプロパティストローク-ダシャーレイとプロパティを使用してそれを行うことができます。ストローク-ダッシュオフセット。

正しいパスの長さを知る/推測し、(矢印とパス) アニメーションの長さを同じに保つだけで済みます。

これはクリーンアップされたデモです:
(完璧ではありませんが、機能します)

#

リーリー リーリー