Animasi laluan kuning-svg

Question

.arrow{
  lebar: 45px;
  ketinggian: 25px;
  laluan klip: poligon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  latar belakang: hijau;
  jawatan: mutlak;
  atas: 0;
  kiri: 0;
  laluan offset: laluan("M304 2C304 9 304 16 304 23C304 27.7274 306 31.2947 306 36C306 41.7305 308 47.4234 308 6 308 5 09 64.5C309 69.0286 306.737 68 302.778 68C291.444 68 280.111 68 268.778 68C253.531 68 238.321 72. 772 72 212.751 72.678 207.556 72.94444c204.436 73.1044 199.112 71.9994 196.556 74.5556c194.211 67 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.999999 169c3.84153 173.722 2.99999 183.142 2.99999 188.5c2.99999 194.765 4.14255 202.303 C1.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.2222c374 7 371 331c371 339.764 360.794 335 355 335c308 335 261 335 214 335 M193 149c197.514 149 201.976 148.163 206.222 147.735 219.646 145 226.5 145C247.333 145 268.167 145 289 145C304.833 145 320.667 145 336.5 4.5 4.5 3.5 .056 145C355.722 145 371.604 146.792 373 144");

  animasi: followpath 12s linear tak terhingga
}
@keyframes laluan ikut{
  kepada{
    jarak offset: 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">
      </marker>
    </defs>
<laluan d="M304 2C304 9 304 16 304 23C304 27.7274 306 31.2947 306 36C306 41.7305 308 47.4234 308 53C308 53C308 53C308 53C308 64.5C309 69.0286 306.737 68 302.778 68C291.444 68 280.111 68 268.778 68C253.531 68 238.361 72 C7217 72 212.751 72.678 207.556 72.94444c204.436 73.1044 199.112 71.9994 196.556 5 137.333 195 140.5c195 142 195 143.5 195 145c195 145.758 194.846 146.71 195.056 147.4444c195.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.715 145.715 35 44.53 22.5 143.944C19.5895 143.497 12.9189 143.888 10.7778 142.222C9.9328 141.565 8.08918 153.4918 153.4999 572 8.0384 164.541 5.99999 169c3.84153 173.722 2.999999 183.142 2.999999 188.5c2.99999 194.765 4.14255 202.303 2.77777 208.444071 1.999.44.44.44 99 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 343.682 230.584 372 232C375.676 232.184 374 253.525 374 257.222C374 267.587 371 277.175 314 4C47.314 371 309C371 316.333 371 323.667 371 331C371 339.764 360.794 335 355 335C308 335 261 335 214 335 lejang = "hitam lebar 335" " stroke-linecap="round"/>
<laluan d="M193 149C197.514 149 201.976 148.163 206.222 148C213.115 147.735 219.646 145 226.5 145C3 4.5 145C3 4 45C304.833 145 320.667 145 336.5 145C341.685 145 346.87 145 352.056 145C355.722 145 371.604 4 46. " stroke-linecap="round" stroke-linejoin="round" marker-end="none" />
</svg>
</div>

我想让箭头开始之前的路径不可见只有当箭头经过这条路径时，路径有当箭头经过这条路径时，路径才说应该是黄的，同时，覆盖了整个矢量之后的矢量也不应该是那样的它应该是一个矢量有人能帮我实现这个吗。

Answer 1

Saya tidak faham sepenuhnya apa yang anda maksudkan (terutamanya bahagian "kuning" dan vektor), tetapi jika anda hanya mahu melukis garisan di belakang anak panah, anda boleh melakukannya dengan animasi css dan sifat stroke-dasharray dan stroke- dashoffset.

Anda hanya perlu tahu/teka panjang laluan yang betul dan pastikan tempoh animasi (anak panah dan laluan) sama.

Berikut ialah demo bersih:
(Ia tidak sempurna, tetapi ia berkesan)

.arrow{
    width: 45px;
    height: 25px;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    background: green;
    position: absolute;
    top: 0;
    left: 0;
    offset-path: 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 85C195 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 214.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");
    animation: followpath 12s linear infinite
  }
  @keyframes followpath{
    to{
      offset-distance: 100%;
    }
  }
  
  #myPath{
     --line-length: 1170;
     stroke-dasharray: var(--line-length);
     stroke-dashoffset: var(--line-length);
     animation: drawPath 12s linear infinite;
  }
  
  @keyframes drawPath {
     0% { stroke-dashoffset: var(--line-length); }
     50% { stroke: yellow;}
     100% { 
            stroke-dashoffset: 0; 
            stroke: yellow;
     }
  }

<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"></marker>
        </defs>
        <path id="myPath" 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 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 214.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" stroke="black" stroke-width="3" stroke-linecap="round"/>
    </svg>
</div>