我在SVG中很新，我有codepen
问题是如何从左到右动画svg？现在整个svg填满了。
<svg width="249" height="52" viewBox="0 0 249 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#000000ff">
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 183.73 0.00 L 187.27 0.00 C 187.27 6.40 187.25 12.80 187.29 19.19 C 190.78 19.99 194.44 20.48 197.99 19.79 C 200.40 18.19 198.99 14.49 199.52 12.00 C 200.60 12.00 201.68 12.00 202.76 12.00 C 202.82 14.29 202.77 16.59 203.12 18.86 C 204.16 19.60 205.37 20.05 206.53 20.58 C 206.63 18.08 206.47 15.54 206.95 13.07 C 208.11 7.91 216.71 7.44 218.61 12.30 C 219.76 14.95 218.31 17.66 217.29 20.08 C 220.17 20.03 223.07 20.16 225.93 19.75 C 227.46 17.51 226.68 14.55 226.98 12.00 C 228.10 12.00 229.22 12.00 230.34 12.01 C 230.48 14.28 230.26 16.63 230.94 18.83 C 231.82 20.25 233.49 20.06 234.92 19.92 C 236.23 17.52 235.60 14.62 235.83 12.00 C 236.66 12.00 238.31 12.00 239.13 12.00 C 239.24 14.14 239.13 16.32 239.59 18.43 C 240.51 20.31 242.90 19.71 244.58 19.92 C 244.69 17.28 244.74 14.64 244.77 12.00 C 245.67 12.00 247.47 12.01 248.37 12.01 C 248.02 15.37 249.10 19.73 246.10 22.15 C 243.77 24.00 240.85 22.38 238.45 21.57 C 235.54 23.16 232.33 23.15 229.44 21.53 C 225.69 23.22 221.54 23.15 217.52 22.98 C 218.26 24.60 219.14 26.20 219.47 27.98 C 219.53 29.76 217.98 30.88 216.86 32.00 L 212.37 32.00 C 207.96 31.41 207.10 26.90 206.83 23.22 C 204.92 22.94 203.02 22.64 201.13 22.29 C 196.65 23.26 191.98 23.37 187.52 22.22 C 186.89 26.45 184.83 30.73 180.40 32.00 L 171.38 32.00 C 168.91 31.04 166.37 29.53 165.41 26.92 C 164.06 23.28 164.60 19.31 164.50 15.51 C 165.37 15.52 167.11 15.53 167.98 15.54 C 168.14 19.12 167.43 22.92 168.71 26.34 C 170.61 29.59 174.91 29.13 178.12 29.02 C 180.94 29.10 183.65 26.88 183.62 23.96 C 183.96 15.98 183.61 7.99 183.73 0.00 M 211.91 11.56 C 210.02 14.16 209.90 17.34 210.10 20.43 C 212.93 19.57 216.40 17.59 215.70 14.08 C 215.71 12.04 213.26 12.15 211.91 11.56 M 209.95 22.35 C 210.34 24.13 210.38 26.04 211.26 27.67 C 212.47 29.68 215.93 29.56 216.59 27.11 C 216.37 23.68 212.53 23.19 209.95 22.35 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 27.53 1.00 C 28.40 1.00 30.13 1.00 31.00 1.00 C 31.26 6.89 30.43 12.89 31.43 18.70 C 34.27 20.31 37.80 20.14 40.96 19.88 C 43.46 18.29 41.97 14.54 42.45 12.02 C 43.57 12.01 44.70 12.00 45.83 11.99 C 45.86 14.27 45.74 16.56 46.06 18.82 C 48.16 21.07 52.03 19.99 54.75 19.61 C 56.32 17.62 55.30 14.44 55.65 12.00 C 56.57 12.00 58.41 12.01 59.33 12.01 C 59.17 15.70 60.02 20.95 55.79 22.70 C 51.94 23.35 47.92 23.25 44.15 22.21 C 40.24 23.21 36.13 23.29 32.15 22.80 C 30.13 22.50 27.69 21.36 27.65 19.00 C 27.31 13.01 27.64 7.00 27.53 1.00 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 117.53 1.00 C 118.40 1.00 120.13 1.00 121.00 1.00 C 121.24 6.89 120.48 12.86 121.39 18.70 C 123.50 19.84 126.32 20.45 128.62 19.62 C 130.47 17.65 129.28 14.47 129.64 12.00 C 130.50 12.00 132.21 12.00 133.06 12.00 C 133.42 14.74 131.98 19.50 135.88 20.09 C 138.60 16.87 139.31 11.80 143.44 9.69 C 147.28 7.36 152.03 10.92 152.30 15.01 C 152.54 17.84 152.00 21.85 148.81 22.78 C 144.86 23.24 140.85 23.05 136.89 22.95 C 134.95 23.12 133.57 21.67 132.19 20.57 C 129.22 23.65 124.65 23.52 120.80 22.46 C 119.24 22.04 117.70 20.83 117.66 19.08 C 117.30 13.07 117.65 7.03 117.53 1.00 M 139.81 19.94 C 142.62 19.99 145.42 19.99 148.23 19.95 C 148.66 17.27 149.74 13.68 147.05 11.83 C 143.08 12.59 141.69 16.91 139.81 19.94 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 82.10 7.20 C 82.93 7.13 84.58 6.99 85.41 6.92 C 85.54 8.66 85.57 11.42 83.01 11.03 C 80.86 11.53 79.87 7.70 82.10 7.20 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 87.97 9.88 C 86.21 7.98 90.11 5.76 91.50 7.55 C 91.91 7.92 92.75 8.67 93.16 9.04 C 91.88 10.31 89.18 12.36 87.97 9.88 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 102.52 8.49 C 103.30 7.65 104.09 6.80 104.89 5.96 C 107.71 9.16 110.93 12.02 113.51 15.43 C 115.61 17.95 114.12 22.12 110.93 22.79 C 106.74 23.30 102.50 22.92 98.29 22.96 C 98.18 22.22 97.97 20.74 97.86 20.00 C 102.28 20.00 106.70 20.11 111.11 19.79 C 110.36 14.83 105.47 12.13 102.52 8.49 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 8.27 11.00 C 7.89 8.92 10.75 9.13 12.05 8.71 C 12.41 9.26 13.13 10.36 13.48 10.91 C 13.06 11.51 12.21 12.72 11.79 13.32 C 10.52 12.71 8.03 13.02 8.27 11.00 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 19.58 12.00 C 20.50 12.00 22.34 12.00 23.26 12.00 C 23.15 16.83 23.80 21.80 22.48 26.52 C 21.66 29.38 18.94 30.95 16.36 32.00 L 7.39 32.00 C 4.59 30.98 1.83 29.07 1.00 26.05 C 0.20 22.60 0.57 19.03 0.51 15.53 C 1.34 15.52 3.02 15.50 3.85 15.50 C 3.93 18.88 3.49 22.37 4.37 25.69 C 5.91 29.49 10.69 29.22 14.08 29.02 C 16.49 29.03 19.16 27.43 19.44 24.87 C 19.86 20.59 19.55 16.29 19.58 12.00 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 81.69 14.67 C 84.10 10.74 90.72 11.19 92.65 15.36 C 93.91 18.71 93.64 22.46 93.05 25.92 C 92.46 29.22 89.32 31.02 86.42 32.00 L 77.53 32.00 C 75.24 31.05 72.76 29.80 71.79 27.34 C 70.41 23.74 70.94 19.78 70.83 16.00 C 71.68 16.00 73.39 16.00 74.24 16.00 C 74.36 19.37 73.80 22.90 74.85 26.17 C 76.78 29.88 81.64 29.13 85.11 28.94 C 88.28 28.90 89.39 25.61 90.60 23.28 C 87.94 22.94 85.27 22.61 82.60 22.32 C 81.49 19.98 80.15 17.15 81.69 14.67 M 84.33 18.59 C 85.80 20.43 88.40 19.84 90.44 20.15 C 89.72 18.05 89.10 14.21 85.98 15.05 C 84.16 14.96 83.78 17.25 84.33 18.59 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 35.14 28.22 C 36.89 27.58 38.41 28.70 39.90 29.44 C 39.46 30.08 38.57 31.36 38.13 32.00 L 35.68 32.00 C 34.94 30.82 34.09 29.54 35.14 28.22 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 41.62 28.87 C 42.64 28.35 43.67 27.87 44.72 27.44 C 45.10 28.10 45.85 29.40 46.22 30.05 C 45.92 30.54 45.31 31.51 45.01 32.00 L 42.35 32.00 C 41.96 31.00 41.05 29.98 41.62 28.87 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 51.20 27.48 C 52.50 27.96 53.82 28.40 55.07 29.01 C 54.87 30.02 54.61 31.02 54.31 32.00 L 50.95 32.00 C 50.66 31.52 50.08 30.57 49.78 30.09 C 50.14 29.44 50.84 28.13 51.20 27.48 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 192.14 28.22 C 193.89 27.59 195.40 28.70 196.89 29.43 C 196.45 30.07 195.57 31.36 195.13 32.00 L 192.68 32.00 C 191.93 30.82 191.09 29.53 192.14 28.22 Z" />
<path stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 198.31 28.14 C 199.23 28.10 201.07 28.00 201.98 27.96 C 202.30 28.46 202.94 29.47 203.25 29.98 C 202.93 30.48 202.28 31.49 201.96 32.00 L 199.31 32.00 C 198.93 30.73 198.61 29.44 198.31 28.14 Z" />
</g>
</svg>
答案 0 :(得分：2)
这是你追求的那种东西吗？
body{
margin:0 auto;
width:960px;
}
.path,path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 4s ease-in forwards;
}
.nodelay {
animation-delay: 4s;
}
.delay2 {
animation-delay: 2s;
}
.delay3 {
animation-delay: 0s;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}<svg width="249" height="52" viewBox="0 0 249 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#000000ff">
<path class="nodelay" stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 183.73 0.00 L 187.27 0.00 C 187.27 6.40 187.25 12.80 187.29 19.19 C 190.78 19.99 194.44 20.48 197.99 19.79 C 200.40 18.19 198.99 14.49 199.52 12.00 C 200.60 12.00 201.68 12.00 202.76 12.00 C 202.82 14.29 202.77 16.59 203.12 18.86 C 204.16 19.60 205.37 20.05 206.53 20.58 C 206.63 18.08 206.47 15.54 206.95 13.07 C 208.11 7.91 216.71 7.44 218.61 12.30 C 219.76 14.95 218.31 17.66 217.29 20.08 C 220.17 20.03 223.07 20.16 225.93 19.75 C 227.46 17.51 226.68 14.55 226.98 12.00 C 228.10 12.00 229.22 12.00 230.34 12.01 C 230.48 14.28 230.26 16.63 230.94 18.83 C 231.82 20.25 233.49 20.06 234.92 19.92 C 236.23 17.52 235.60 14.62 235.83 12.00 C 236.66 12.00 238.31 12.00 239.13 12.00 C 239.24 14.14 239.13 16.32 239.59 18.43 C 240.51 20.31 242.90 19.71 244.58 19.92 C 244.69 17.28 244.74 14.64 244.77 12.00 C 245.67 12.00 247.47 12.01 248.37 12.01 C 248.02 15.37 249.10 19.73 246.10 22.15 C 243.77 24.00 240.85 22.38 238.45 21.57 C 235.54 23.16 232.33 23.15 229.44 21.53 C 225.69 23.22 221.54 23.15 217.52 22.98 C 218.26 24.60 219.14 26.20 219.47 27.98 C 219.53 29.76 217.98 30.88 216.86 32.00 L 212.37 32.00 C 207.96 31.41 207.10 26.90 206.83 23.22 C 204.92 22.94 203.02 22.64 201.13 22.29 C 196.65 23.26 191.98 23.37 187.52 22.22 C 186.89 26.45 184.83 30.73 180.40 32.00 L 171.38 32.00 C 168.91 31.04 166.37 29.53 165.41 26.92 C 164.06 23.28 164.60 19.31 164.50 15.51 C 165.37 15.52 167.11 15.53 167.98 15.54 C 168.14 19.12 167.43 22.92 168.71 26.34 C 170.61 29.59 174.91 29.13 178.12 29.02 C 180.94 29.10 183.65 26.88 183.62 23.96 C 183.96 15.98 183.61 7.99 183.73 0.00 M 211.91 11.56 C 210.02 14.16 209.90 17.34 210.10 20.43 C 212.93 19.57 216.40 17.59 215.70 14.08 C 215.71 12.04 213.26 12.15 211.91 11.56 M 209.95 22.35 C 210.34 24.13 210.38 26.04 211.26 27.67 C 212.47 29.68 215.93 29.56 216.59 27.11 C 216.37 23.68 212.53 23.19 209.95 22.35 Z" />
<path class="delay3" stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 27.53 1.00 C 28.40 1.00 30.13 1.00 31.00 1.00 C 31.26 6.89 30.43 12.89 31.43 18.70 C 34.27 20.31 37.80 20.14 40.96 19.88 C 43.46 18.29 41.97 14.54 42.45 12.02 C 43.57 12.01 44.70 12.00 45.83 11.99 C 45.86 14.27 45.74 16.56 46.06 18.82 C 48.16 21.07 52.03 19.99 54.75 19.61 C 56.32 17.62 55.30 14.44 55.65 12.00 C 56.57 12.00 58.41 12.01 59.33 12.01 C 59.17 15.70 60.02 20.95 55.79 22.70 C 51.94 23.35 47.92 23.25 44.15 22.21 C 40.24 23.21 36.13 23.29 32.15 22.80 C 30.13 22.50 27.69 21.36 27.65 19.00 C 27.31 13.01 27.64 7.00 27.53 1.00 Z" />
<path class="delay2" stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 117.53 1.00 C 118.40 1.00 120.13 1.00 121.00 1.00 C 121.24 6.89 120.48 12.86 121.39 18.70 C 123.50 19.84 126.32 20.45 128.62 19.62 C 130.47 17.65 129.28 14.47 129.64 12.00 C 130.50 12.00 132.21 12.00 133.06 12.00 C 133.42 14.74 131.98 19.50 135.88 20.09 C 138.60 16.87 139.31 11.80 143.44 9.69 C 147.28 7.36 152.03 10.92 152.30 15.01 C 152.54 17.84 152.00 21.85 148.81 22.78 C 144.86 23.24 140.85 23.05 136.89 22.95 C 134.95 23.12 133.57 21.67 132.19 20.57 C 129.22 23.65 124.65 23.52 120.80 22.46 C 119.24 22.04 117.70 20.83 117.66 19.08 C 117.30 13.07 117.65 7.03 117.53 1.00 M 139.81 19.94 C 142.62 19.99 145.42 19.99 148.23 19.95 C 148.66 17.27 149.74 13.68 147.05 11.83 C 143.08 12.59 141.69 16.91 139.81 19.94 Z" />
<path class="delay2" stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 82.10 7.20 C 82.93 7.13 84.58 6.99 85.41 6.92 C 85.54 8.66 85.57 11.42 83.01 11.03 C 80.86 11.53 79.87 7.70 82.10 7.20 Z" />
<path class="delay2" stroke="#f7b547" stroke-width="2" stroke-miterlimit="10" fill="#fff" opacity="1.00" d=" M 87.97 9.88 C 86.21 7.98 90.11 5.76 91.50 7.55 C 91.91 7.92 92.75 8.67 93.16 9.04 C 91.88 10.31 89.18 12.36 87.97 9.88 Z" />
<path class="delay2" stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 102.52 8.49 C 103.30 7.65 104.09 6.80 104.89 5.96 C 107.71 9.16 110.93 12.02 113.51 15.43 C 115.61 17.95 114.12 22.12 110.93 22.79 C 106.74 23.30 102.50 22.92 98.29 22.96 C 98.18 22.22 97.97 20.74 97.86 20.00 C 102.28 20.00 106.70 20.11 111.11 19.79 C 110.36 14.83 105.47 12.13 102.52 8.49 Z" />
<path class="delay3" stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 8.27 11.00 C 7.89 8.92 10.75 9.13 12.05 8.71 C 12.41 9.26 13.13 10.36 13.48 10.91 C 13.06 11.51 12.21 12.72 11.79 13.32 C 10.52 12.71 8.03 13.02 8.27 11.00 Z" />
<path class="nodelay" stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 192.14 28.22 C 193.89 27.59 195.40 28.70 196.89 29.43 C 196.45 30.07 195.57 31.36 195.13 32.00 L 192.68 32.00 C 191.93 30.82 191.09 29.53 192.14 28.22 Z" />
<path class="nodelay" stroke="#f7b547" stroke-width="2" stroke-miterlimit="5" fill="#fff" opacity="1.00" d=" M 198.31 28.14 C 199.23 28.10 201.07 28.00 201.98 27.96 C 202.30 28.46 202.94 29.47 203.25 29.98 C 202.93 30.48 202.28 31.49 201.96 32.00 L 199.31 32.00 C 198.93 30.73 198.61 29.44 198.31 28.14 Z" />
</g>
</svg>
答案 1 :(得分：2)
为每个路径添加一个类，并在css中添加延迟属性。
答案 2 :(得分：0)
如果要为整个svg元素设置动画，只需使用css动画：
@keyframes moveLeft {
0% {left : 0px;}
100% {left : 200px;}
}
svg{
position : relative;
animation-name : moveLeft;
animation-duration : 4s;
animation-iteration-count : infinite;
}
查看codepen。