搜尋

首頁  >  問答  >  主體

Yellow-svg-path動畫

<p><br />></p> 
.arrow{
  寬度：45 像素；
  高度：25 像素；
  剪輯路徑：多邊形（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 896308 5896308 5896308 589308 589695895895 508969308 5895308 58963895895308 58963895895895308 5895308 5895308 58953895895308 58963895 5895895308957. 64.5C309 69.0286 306.737 68 302.778 68C291.444 68 280.111 68 268.778 68C253.531 68 237.361 72C213 772C213 772C21372。 772 72 212.751 72.678 207.556 72.9444C204.436 73.1044 199.112 71.9994 196.556 74.5556C1941.9994 196.556 74.5556C194195. 5 100.333 195 115.667 195 131C195 134.167 195 137.333 195 140.5C195 142 195 143.5 195 145C195 142 195 143.5 195 145C195 142 195 143.5 195 145C195 145C1969. 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 1485 53. 4.89 26. 3082 144.53 22.5 143.944C19.5895 143.497 12.9189 143.888 10.7778 142.222C9.9328 188 10.7778 142.222C9.9328 1389.194. 5C5. 23771 158.572 8.0384 164.541 5.99999 169C3.84153 173.722 2.99999 183.142 2.99999 188.5C2.9969295. 777 208.444C1.4407 21 4.461 1.99999 220.799 1.99999 226.944C1.99999 231.946 2.29047 232 79999 231.946 2.29047 232 79999 231.946 2.29047 232 73. 23.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.222C3747.747 374757 37. C371 294.63 371 301. 815 371 309C371 316.333 371 323.667 371 331C371 339.764 360.794 335 35583235355353 15353 1355 149C197.514 149 201.9 76 148.163 206.222 148C213.115 147.735 219.646 145 226.5 145C247.333 145 268.167 145C26415 3054505C 4505C 336.5 145C341.685 145 346.87 145 352. 056 145C355.722 145 371.604 146.792 373 144");

  動畫：followpath 12s 線性無限
}
@關鍵影格跟隨路徑{
  到{
    偏移距離：100%；
  }
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
  
;
  
<矩形寬度=“376”高度=“338”填滿=“#F5F5F5”/>
    <定義>
    <標記 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 896308589695089. 64.5C309 69.0286 306.737 68 302.778 68C291.444 68 280.111 68 268.778 68C253.531 68 237.361 72272727227272727272727272727272727272727272727272727272727272727272727272727272727237 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 14385.1453 5315 53. 44.89 26.3082 14 4.53 22.5 143.944C19.5895 143.497 12.9189 143.888 10.77788 142.222C9.9328 888 10.7778 142.222C9.9328 1489.5314895315319. .5C5.23771 158.57 2 8.0384 164.541 5.99999 169C3.84153 173.722 2.99999 183.142 2.99999 188.5C2.99999 142 2.99999 188.5C2.99999 194725. 08.444C1.4407 214.461 1. 99999 220.799 1.99999 226.944C1.99999 231.946 2.29047 232 7.22251 23825. 2 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。 .444C371 294.63 371 301.815 371 309C371 316.333 371 323.667 371 331C371 339.764 360.794 335C353535C描邊="黑色" 描邊寬度="3 “ 筆劃線帽=“圓形”/>
<路徑d=“M193 149C197.514 149 201.976 148.163 206.222 148C213.115 147.735 219.646 145 226.5 147.735 219.646 145 226.5 147.735 219.646 145 226.5 147. 5C304.833 145 320.667 145 336.5 145C341.685 145 346.87 145 352.056 145C355.722 145 371.604 3732 3732 3732 3732 144 “ 筆畫線帽=“圓形” 筆畫線加入=“圓形” 標記結束=“無” />
</svg>
</div></pre>
<p><br />></p>
<p>我使箭頭開始的路徑之前不可見只有當箭頭經過路徑時，路徑才可見第二路徑的顏色應該是黃色的，同時，覆蓋了整個向量之後的向量也不應該是那樣它應該是一個向量，有人能幫我實現這個嗎。</p>
P粉021708275P粉021708275469 天前695

全部回覆(1)我來回復

  • P粉129731808

    P粉1297318082023-08-03 15:43:01

    我不完全理解你的意思(特別是「黃色」和向量部分)，但如果你只想在箭頭後面畫線，你可以用css動畫和屬性stroke-dasharray和stroke-dashoffset來實現。

    你只需要知道/猜測正確的路徑長度，並保持(箭頭和路徑)動畫的持續時間相同。

    這裡是一個清理後的示範:
    (這不是完美的，但它有效)



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

    回覆
    0
  • 取消回覆