SVG路径动画问题

Question

我是CSS动画的新手，我正努力使此动画正常工作。

我一直在关注这个CSS Tricks帖子 。

目前，我不明白为什么动画中有三个单独的起点。

我想从一个点开始，一直沿路径走（与哪个方向无关），然后在起点处关闭动画。

那可能吗？ 如果是的话，谁能告诉我到目前为止我尝试过的问题是什么？

任何帮助表示赞赏，谢谢。

这是演示中的代码（我已经裁剪了一些svg代码）：

HTML

<svg xmlns="http://www.w3.org/2000/svg"
     width="3.27778in" height="3.27778in"
     viewBox="0 0 236 236">
  <path class="path"
        fill="none" stroke="black" stroke-width="2"
        d="M 236.00,0.00
           C 236.00,0.00 236.00,236.00 236.00,236.00
             236.00,236.00 0.00,236.00 0.00,236.00
             0.00,236.00 0.00,0.00 0.00,0.00
             0.00,0.00 236.00,0.00 236.00,0.00 Z
           M 74.00,34.00

          .........

           C 212.00,194.00 213.00,195.00 213.00,195.00
             213.00,195.00 213.00,194.00 213.00,194.00
             213.00,194.00 212.00,194.00 212.00,194.00 Z" />
</svg>

CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 10s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

好吧，根据路径的长度增加stroke-dasharray和stroke-dashoffset 。

codepen

Codepen-无国界

 .path { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: dash 20s 1; } @keyframes dash { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } } 

 <svg xmlns="http://www.w3.org/2000/svg" width="3.27778in" height="3.27778in" viewBox="0 0 236 236"> <path class="path" fill="none" stroke="black" stroke-width="2" d="M 236.00,0.00 C 236.00,0.00 236.00,236.00 236.00,236.00 236.00,236.00 0.00,236.00 0.00,236.00 0.00,236.00 0.00,0.00 0.00,0.00 0.00,0.00 236.00,0.00 236.00,0.00 Z M 74.00,34.00 C 74.00,34.00 54.00,32.00 54.00,32.00 59.73,35.89 69.12,35.68 73.85,38.93 79.05,42.49 78.36,58.39 77.00,64.00 77.00,64.00 52.00,59.00 52.00,59.00 56.43,65.82 63.78,61.04 74.00,68.00 74.00,68.00 56.00,73.60 56.00,73.60 53.01,74.57 49.98,76.06 47.41,73.60 42.33,68.43 42.77,58.02 36.00,54.00 37.16,61.37 39.83,64.58 41.93,71.00 42.50,72.72 43.33,75.43 41.33,76.58 37.06,79.03 24.82,72.09 19.00,76.00 19.00,76.00 38.00,81.00 38.00,81.00 33.28,87.05 24.22,90.79 22.00,98.00 25.49,96.51 38.29,87.36 40.23,84.42 41.25,82.88 40.80,82.84 41.00,82.00 41.00,82.00 51.00,78.35 51.00,78.35 51.00,78.35 67.00,73.71 67.00,73.71 67.00,73.71 76.78,71.78 76.78,71.78 76.78,71.78 80.48,77.00 80.48,77.00 80.48,77.00 84.00,94.00 84.00,94.00 80.23,94.67 68.20,96.98 66.90,91.85 66.30,89.47 68.62,85.59 69.00,80.00 69.00,80.00 62.49,90.82 62.49,90.82 62.49,90.82 54.00,94.00 54.00,94.00 53.19,91.30 52.67,91.77 50.00,92.00 55.87,98.01 60.01,94.59 59.00,105.00 59.00,105.00 67.04,98.60 67.04,98.60 67.04,98.60 85.00,97.00 85.00,97.00 85.00,97.00 85.00,137.00 85.00,137.00 84.98,139.36 85.24,144.44 82.43,145.40 78.77,146.65 74.50,140.67 67.00,142.00 66.14,138.99 64.94,139.35 62.00,139.00 66.19,145.51 79.71,146.43 81.72,152.10 82.81,155.18 78.24,162.07 76.76,165.00 72.50,173.39 63.37,188.40 62.00,197.00 66.37,194.37 68.03,189.44 70.25,185.00 70.25,185.00 81.20,164.00 81.20,164.00 82.99,160.47 85.05,155.01 88.21,152.58 91.43,150.11 107.98,148.29 113.00,147.39 118.23,146.44 139.09,142.56 143.00,143.43 146.22,144.15 150.15,147.14 153.00,148.95 156.73,151.31 162.68,154.48 165.62,157.47 167.98,159.86 176.04,174.12 178.23,177.96 180.57,182.08 185.22,189.63 186.18,194.00 188.01,200.41 183.51,204.14 186.18,213.00 186.18,213.00 189.00,201.00 189.00,201.00 197.09,203.50 195.76,209.52 201.00,215.00 201.34,212.28 201.90,210.92 199.00,210.00 200.88,201.68 194.91,200.49 195.16,196.14 195.53,189.51 209.51,193.23 213.00,193.00 214.14,196.54 214.51,196.72 218.00,198.00 216.38,192.94 210.53,188.45 205.00,188.72 202.79,188.83 196.24,191.04 193.02,190.77 189.28,190.45 188.47,187.82 185.00,187.00 185.29,180.69 179.76,173.45 176.72,168.00 175.82,166.37 173.22,162.54 174.82,160.96 176.23,159.22 180.29,160.67 182.00,160.96 187.91,162.78 194.92,165.87 201.00,165.00 203.49,168.01 206.30,167.83 210.00,168.00 207.31,163.72 204.56,164.32 200.00,162.96 200.00,162.96 180.00,157.00 180.00,157.00 180.00,157.00 180.00,155.00 180.00,155.00 180.00,155.00 200.00,147.56 200.00,147.56 205.16,145.97 211.08,144.92 214.00,140.00 211.30,140.62 210.78,140.28 210.00,143.00 198.29,140.73 177.85,157.17 166.00,152.46 163.52,151.47 157.21,147.50 155.08,145.82 153.77,144.79 151.81,143.36 152.91,141.46 155.31,137.34 165.47,139.09 169.00,134.00 169.00,134.00 149.00,138.00 149.00,138.00 149.00,138.00 154.00,123.00 154.00,123.00 150.14,126.04 148.18,127.93 148.00,133.00 142.79,134.17 143.44,138.55 137.98,140.35 137.98,140.35 102.00,146.46 102.00,146.46 98.91,146.76 92.01,148.56 89.46,146.46 87.21,145.00 88.05,139.63 87.99,137.00 87.99,137.00 87.32,127.00 87.32,127.00 87.65,122.58 88.21,118.48 87.91,114.00 87.65,110.06 86.61,103.73 88.50,100.05 89.97,97.18 93.15,96.23 96.00,95.23 96.00,95.23 120.00,88.65 120.00,88.65 127.37,88.71 132.25,96.11 141.00,95.00 141.00,95.00 140.00,97.00 140.00,97.00 140.00,97.00 143.00,95.00 143.00,95.00 139.30,93.02 125.70,87.57 124.97,83.82 124.47,81.20 127.61,77.01 128.00,69.00 122.58,74.14 124.27,77.91 120.35,82.89 116.77,87.46 104.77,89.54 99.00,91.34 96.79,92.03 92.33,93.67 90.13,93.10 88.00,92.55 87.16,90.87 86.40,88.98 84.97,85.43 81.60,72.39 84.48,69.60 87.04,67.12 101.06,67.00 105.00,67.00 105.00,67.00 105.00,63.84 105.00,63.84 102.31,64.22 93.70,66.01 91.98,63.84 90.84,62.15 93.11,60.04 94.09,59.05 98.59,54.49 100.21,54.33 106.00,53.00 107.07,57.60 111.67,59.00 116.00,59.00 116.00,59.00 107.00,50.00 107.00,50.00 111.64,48.49 119.25,48.00 122.00,44.00 122.00,44.00 109.00,45.00 109.00,45.00 109.00,45.00 113.00,36.00 113.00,36.00 107.32,37.82 104.51,43.68 100.71,48.00 96.69,52.57 87.45,60.47 82.21,63.00 81.01,57.47 78.09,42.68 82.21,38.70 87.21,34.31 102.19,32.67 106.00,27.00 106.00,27.00 85.00,33.00 85.00,33.00 85.00,33.00 90.00,21.00 90.00,21.00 85.47,22.46 84.17,24.25 84.00,29.00 84.00,29.00 78.90,30.83 78.90,30.83 78.90,30.83 70.00,20.00 70.00,20.00 70.00,20.00 69.00,16.00 69.00,16.00 66.10,20.90 71.91,29.16 74.00,34.00 Z M 88.00,34.00 C 88.00,34.00 87.00,35.00 87.00,35.00 87.00,35.00 87.00,34.00 87.00,34.00 87.00,34.00 88.00,34.00 88.00,34.00 Z M 103.00,49.00 C 103.00,49.00 102.00,50.00 102.00,50.00 102.00,50.00 102.00,49.00 102.00,49.00 102.00,49.00 103.00,49.00 103.00,49.00 Z M 105.00,65.00 C 105.00,65.00 106.00,66.00 106.00,66.00 106.00,66.00 106.00,65.00 106.00,65.00 106.00,65.00 105.00,65.00 105.00,65.00 Z M 22.00,75.00 C 22.00,75.00 21.00,76.00 21.00,76.00 21.00,76.00 21.00,75.00 21.00,75.00 21.00,75.00 22.00,75.00 22.00,75.00 Z M 126.00,75.00 C 126.00,75.00 125.00,76.00 125.00,76.00 125.00,76.00 125.00,75.00 125.00,75.00 125.00,75.00 126.00,75.00 126.00,75.00 Z M 196.00,147.00 C 196.00,147.00 195.00,148.00 195.00,148.00 195.00,148.00 195.00,147.00 195.00,147.00 195.00,147.00 196.00,147.00 196.00,147.00 Z M 156.00,148.00 C 156.00,148.00 155.00,149.00 155.00,149.00 155.00,149.00 155.00,148.00 155.00,148.00 155.00,148.00 156.00,148.00 156.00,148.00 Z M 212.00,194.00 C 212.00,194.00 213.00,195.00 213.00,195.00 213.00,195.00 213.00,194.00 213.00,194.00 213.00,194.00 212.00,194.00 212.00,194.00 Z" /> </svg>