Yellow-svg-path animation

Question

.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 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");

  animation: followpath 12s linear infinite
}
@keyframes followpath{
  to{
    offset-distance: 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>
<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 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"/>
<path 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 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"  stroke-linecap="round" stroke-linejoin="round" marker-end="none"  />
</svg>
</div>

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

Answer 1

I don't fully understand what you mean (especially the "yellow" and vector part), but if you just want to draw the line behind the arrow, you can do it with css animation and the properties stroke-dasharray and stroke-dashoffset.

You just need to know/guess the correct path length and keep the duration of the (arrow and path) animation the same.

Here's a cleaned up demo:
(It's not perfect, but it works)

# #

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