想做一个可以通过钢笔/画板/文字去实现apple的hello一样的曲线动画，可以导出GIF格式或者Html代码的小玩意。 如果能帮上忙的话可以给个Star哦！爱你mua😘
stroke-dashoffset: 此属性用于指定虚线模式的起始点。它的值表示从路径起点到虚线模式开始点的距离。通过改变这个值，可以控制虚线模式沿路径的位置，从而影响描边的外观。在动画中，逐渐改变 stroke-dashoffset 的值可以创造出路径逐渐显示或隐藏的效果。
去Figma找一个线条动画，这个线条动画的渐变效果是通过一段一段的不同路径渐变实现的。
而因此在导出成SVG时，他会有色彩不均匀的问题。
那我想，我们现在需要做的是如何用SVG去画出这个logo，Figma转换不能完全信任的话，那就让我们研究一下它转译的SVG代码吧。
<svg width="1068" height="352" viewBox="0 0 1068 352" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 318.376C43.3095 302.398 103.302 264.899 124.798 242.734" stroke="url(#paint0_linear_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M161.798 198.755C179.857 179.551 217.455 132.578 225.226 63.3022C231.393 8.32936 175.855 -1.05784 157.833 47.47C143.298 86.6107 136.25 209.897 127.881 268.681" stroke="url(#paint1_angular_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M114.226 334.648C119.365 300.492 133.607 231.739 157.393 203.593C183.532 172.662 234.458 165.092 240.643 216.347C245.048 252.849 220.381 307.382 244.607 325.852C268.833 344.323 329.619 328.491 355.167 311.34" stroke="url(#paint2_linear_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M359.131 307.709C384.238 295.835 419.091 269.755 430.488 229.735C445.188 178.116 388.152 155.667 355.167 193.478C330.059 222.258 325.215 282.148 360.453 308.736" stroke="url(#paint3_angular_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M351.202 299.905C374.548 331.13 453.657 358.572 523.429 285.393" stroke="url(#paint4_linear_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M535.762 272.199C555.437 247.425 597.869 190.136 611.964 139.824C629.583 76.9355 633.107 32.5175 609.321 21.083C582.893 8.3781 550.298 43.7064 535.762 116.27C525.523 167.387 523.429 194.357 523.429 233.058" stroke="url(#paint5_angular_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M523.429 234.818C522.694 267.362 532.238 334.56 588.619 335.968C654.25 337.606 700.353 276.597 720.762 246.252" stroke="url(#paint6_linear_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M722.084 244.053C739.703 216.786 769.796 156.687 782.429 106.401C796.964 48.544 789.217 28.3755 769.214 21.5229C744.107 12.9215 715.917 47.0303 702.262 106.401C689.798 160.595 676.715 232.179 692.572 277.916" stroke="url(#paint7_angular_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M686.845 251.724C689.929 288.665 718.504 334.047 754.238 335.528C801.369 337.481 834.845 301.665 856.429 235.257" stroke="url(#paint8_linear_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M856.869 235.257C845.857 282.314 856.163 337.551 911.486 335.088C966.81 332.625 981.816 277.77 982.403 250.65C984.899 224.703 975.884 175.007 923.379 175.007" stroke="url(#paint9_angular_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<path d="M857.75 230.42C863.036 211.949 882.945 175.007 920.298 175.007C966.988 175.007 963.464 197.436 996.94 196.557C1023.72 195.853 1044.81 177.499 1052 168.41" stroke="url(#paint10_linear_1_836)" stroke-width="31.7143" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_1_836" x1="124.798" y1="243.173" x2="-10.7281" y2="338.367" gradientUnits="userSpaceOnUse">
<stop stop-color="#157B93"/>
<stop offset="1" stop-color="#037A92"/>
</linearGradient>
<radialGradient id="paint1_angular_1_836" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.643 152.333) rotate(97.5204) scale(215.393 194.978)">
<stop offset="0.0115615" stop-color="#ACD15E"/>
<stop offset="0.735556" stop-color="#29949C"/>
<stop offset="0.881674" stop-color="#23929E"/>
<stop offset="0.955023" stop-color="#1E91A0"/>
</radialGradient>
<linearGradient id="paint2_linear_1_836" x1="114.226" y1="324.093" x2="339.748" y2="334.682" gradientUnits="userSpaceOnUse">
<stop stop-color="#D6D90D"/>
<stop offset="0.494792" stop-color="#FAD500"/>
<stop offset="1" stop-color="#FDD35D"/>
</linearGradient>
<radialGradient id="paint3_angular_1_836" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(362.214 285.393) rotate(125.425) scale(132.225 118.505)">
<stop offset="0.149479" stop-color="#FF9932"/>
<stop offset="0.735351" stop-color="#FFD570"/>
</radialGradient>
<linearGradient id="paint4_linear_1_836" x1="513.298" y1="285.392" x2="364.43" y2="310.978" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF9246"/>
<stop offset="1" stop-color="#FF9F38"/>
</linearGradient>
<radialGradient id="paint5_angular_1_836" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(574.964 102.003) rotate(108.048) scale(211.844 74.6312)">
<stop offset="0.0268639" stop-color="#F45343"/>
<stop offset="0.908962" stop-color="#FD9156"/>
</radialGradient>
<linearGradient id="paint6_linear_1_836" x1="530.476" y1="299.466" x2="709.286" y2="336.519" gradientUnits="userSpaceOnUse">
<stop stop-color="#F55544"/>
<stop offset="1" stop-color="#EE7271"/>
</linearGradient>
<radialGradient id="paint7_angular_1_836" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(731.774 141.584) rotate(103.202) scale(171.654 70.328)">
<stop offset="0.00079382" stop-color="#EF716F"/>
<stop offset="0.0273104" stop-color="#9174B5"/>
</radialGradient>
<linearGradient id="paint8_linear_1_836" x1="700.577" y1="299.367" x2="848.972" y2="324.765" gradientUnits="userSpaceOnUse">
<stop stop-color="#9575B3"/>
<stop offset="1" stop-color="#625EAA"/>
</linearGradient>
<radialGradient id="paint9_angular_1_836" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(917.859 255.087) rotate(90) scale(80.0802 64.9165)">
<stop offset="0.277174" stop-color="#6C9DE2"/>
<stop offset="0.6442" stop-color="#6163B8"/>
</radialGradient>
<linearGradient id="paint10_linear_1_836" x1="857.75" y1="223.383" x2="1061.68" y2="191.621" gradientUnits="userSpaceOnUse">
<stop stop-color="#6C99DF"/>
<stop offset="0.586308" stop-color="#51A5D3"/>
<stop offset="1" stop-color="#7FB6DD"/>
</linearGradient>
</defs>
</svg>
好的现在让我们来理解一个这个SVG代码都在说什么，
<svg>: 这是最基本的SVG容器，用于定义SVG图形的画布区域。它包含了width和height属性来设定大小，以及viewBox属性来指定画布上的可视区域。<path>: 这是SVG中最强大的元素之一，几乎可以用来绘制任何形状。元素使用d属性来描述图形的绘制路径。路径可以包含直线、曲线、弧线等。用于定义一个路径。这个标签是SVG中非常强大的一个元素，几乎可以用来绘制任何形状。d属性包含了一系列的命令和参数来描述路径的形状。此SVG中的每个元素都用来绘制“hello”字样的一部分。<circle>、<rect>、<ellipse>、<line>、<polygon>、<polyline>: 这些都是SVG中用来绘制基本形状的标签，分别用于绘制圆形、矩形、椭圆、直线、多边形和折线。<text>: 用于在SVG中添加文本内容。你可以通过调整x和y属性来控制文本的位置。<defs>: 定义可重复使用的元素，但在内部定义的元素不会直接显示，除非被引用。在这个SVG中，用于定义了一系列的渐变。<linearGradient>: 定义线性渐变。它包含了一系列的元素来定义渐变中的颜色以及颜色的位置。id属性为渐变定义了一个唯一标识符，这样其他的SVG元素就可以通过url(#id)的方式引用它。<radialGradient>: 定义径向渐变。与线性渐变类似，它也使用元素来定义渐变的颜色和位置，但渐变的形状是从中心向外的圆形。<stop>: 用于定义渐变中的一个颜色停点，通过offset属性来指定该颜色在渐变中的位置，stop-color属性来指定颜色值。<clipPath>、<mask>: 这些标签用于定义裁剪路径和遮罩，可以用来控制元素的可视部分。<animate>、<animateTransform>: 这些标签用于给SVG元素添加动画效果。可以控制形状、颜色、位置等属性随时间的变化。
- svg的文字曲线色彩过渡并没有那么丝滑，不同path之间会有明显的色差。
- svg的path是有多个的，写起动画来会比较复杂，想要连贯性可能得手动去调整时间。
尝试一下，首先在Figma中将其拼合。
<svg width="1068" height="352" viewBox="0 0 1068 352" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 318.376C43.3095 302.398 103.302 264.899 124.798 242.734M161.798 198.755C179.857 179.551 217.455 132.578 225.226 63.3022C231.393 8.32936 175.855 -1.05784 157.833 47.47C143.298 86.6107 136.25 209.897 127.881 268.681M114.226 334.648C119.365 300.492 133.607 231.739 157.393 203.593C183.532 172.662 234.458 165.092 240.643 216.347C245.048 252.849 220.381 307.382 244.607 325.852C268.833 344.323 329.619 328.491 355.167 311.34M359.131 307.709C359.131 307.709 359.131 307.709 359.131 307.709ZM359.131 307.709C384.238 295.834 419.091 269.754 430.488 229.735C445.188 178.116 388.152 155.667 355.167 193.478C330.378 221.893 325.34 280.634 359.131 307.709ZM359.131 307.709C359.565 308.057 360.006 308.399 360.453 308.736M351.202 299.905C374.548 331.13 453.657 358.572 523.429 285.393M535.762 272.199C555.437 247.425 597.869 190.136 611.964 139.824C629.583 76.9355 633.107 32.5175 609.321 21.0831C582.893 8.37812 550.298 43.7064 535.762 116.271C525.523 167.387 523.429 194.357 523.429 233.058M523.429 234.818C522.694 267.362 532.238 334.56 588.619 335.968C654.25 337.606 700.353 276.597 720.762 246.252M722.084 244.053C739.703 216.786 769.796 156.687 782.429 106.401C796.964 48.544 789.217 28.3755 769.214 21.5229C744.107 12.9215 715.917 47.0303 702.262 106.401C689.798 160.595 676.715 232.179 692.572 277.916M686.845 251.724C689.929 288.665 718.504 334.047 754.238 335.528C801.369 337.481 834.845 301.665 856.429 235.257M856.869 235.257C845.857 282.314 856.163 337.551 911.486 335.088C966.81 332.625 981.816 277.77 982.403 250.65C984.899 224.703 975.884 175.007 923.379 175.007M857.75 230.42C863.036 211.949 882.945 175.007 920.298 175.007C966.988 175.007 963.464 197.436 996.94 196.556C1023.72 195.853 1044.81 177.499 1052 168.41"
stroke="url(#paint0_linear_114_7)" stroke-width="31.7143" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_114_7" x1="857.75" y1="223.383" x2="1061.68" y2="191.621"
gradientUnits="userSpaceOnUse">
<stop stop-color="#6C99DF"/>
<stop offset="0.586308" stop-color="#51A5D3"/>
<stop offset="1" stop-color="#7FB6DD"/>
</linearGradient>
</defs>
</svg>
在探索的旅途中我发现，一个macSVG编辑器的软件好像可以直接解决我的需求。但是很遗憾我用的是Windows，QAQ。
<svg width="3000" height="3000" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes draw {
from {
stroke-dasharray: 0, 1000;
}
to {
stroke-dasharray: 1000, 0;
}
}
.path {
stroke: black;
stroke-width: 2;
fill: none;
stroke-dasharray: 0, 1000;
animation: draw 5s forwards;
}
</style>
<path class="path" fill-rule="evenodd" clip-rule="evenodd" d="M231.169 2.0204C260.649 8.07776 277.555 37.5806 273.388 74.7827C268.28 120.39 252.586 157.978 235.809 186.543C248.864 187.228 261.842 191.974 272.143 202.227C282.572 212.607 288.763 227.132 290.871 244.626C292.39 257.24 291.346 270.662 289.807 283.012C289.027 289.273 288.075 295.572 287.167 301.568L287.128 301.825C286.221 307.81 285.362 313.482 284.671 318.967C283.238 330.339 282.752 339.375 283.724 346.302C284.656 352.946 286.615 355.591 288.424 356.973C291.564 359.37 297.25 361.574 306.23 362.373C314.997 363.154 325.448 362.461 336.544 360.493C352.319 357.695 367.831 352.614 379.805 347.066C367.463 329.303 362.364 307.737 362.313 287.279C362.241 258.8 371.842 229.146 389.427 208.957C412.859 182.054 446.709 174.974 473.356 186.812C486.653 192.719 497.773 203.271 503.97 217.618C510.175 231.983 510.934 248.916 505.814 266.923C494.767 305.775 467.381 333.845 441.418 351.736C474.881 366.224 528.74 367.143 580.177 313.689C576.611 296.332 575.727 279.683 576.005 267.374C576.009 267.175 576.017 266.978 576.027 266.781C576.009 266.449 576 266.115 576 265.779C576 220.566 578.5 188.72 590.35 129.47C598.919 86.6254 613.137 52.8339 630.715 31.1885C648.023 9.87483 673.211 -4.00422 699.309 8.56123C722.882 19.9112 728.757 45.8821 728.625 70.4388C728.486 96.1131 721.939 128.505 711.835 164.628C694.742 225.735 644.325 293.438 622.104 321.463C621.49 322.237 620.825 322.948 620.117 323.594C621.032 326.204 622.039 328.768 623.143 331.261C631.948 351.126 645.61 364.214 668.45 364.785C699.703 365.566 727.249 351.47 750.617 331.68C756.415 326.769 761.868 321.58 766.963 316.297C766.183 313.625 765.475 310.905 764.834 308.143C763.59 303.093 762.648 298.042 762.034 293.054C758.779 270.294 759.251 245.5 761.523 221.209C764.866 185.465 772.327 148.799 779.457 117.751C787.567 82.4321 800.305 53.051 816.058 33.3194C831.371 14.139 853.786 -0.34363 878.842 8.25376C886.801 10.9848 894.503 15.3964 900.757 22.504C907.006 29.6066 910.878 38.3438 912.855 48.2668C916.648 67.3022 913.841 92.7434 905.46 126.159C890.535 185.661 855.428 255.794 834.626 288.038C834.469 288.281 834.306 288.52 834.14 288.754C833.791 289.457 833.393 290.145 832.944 290.814C826.92 299.785 818.814 311.304 808.741 323.484C811.509 328.942 814.718 334.194 818.309 339.035C830.248 355.132 844.064 363.768 856.747 364.295C878.075 365.18 896.152 357.766 912.117 341.726C928.598 325.169 943.085 299.069 954.879 262.723C955.087 262.081 955.329 261.458 955.6 260.856C955.709 259.851 955.905 258.84 956.193 257.834C959.804 245.194 968.114 226.907 981.914 211.427C995.918 195.717 1016.71 181.779 1044.5 181.779C1045.4 181.779 1046.28 181.786 1047.15 181.799C1047.43 181.786 1047.71 181.779 1048 181.779C1053.37 181.779 1058.46 182.165 1063.27 182.897C1069.64 183.717 1075.3 184.963 1080.43 186.553C1090.16 189.564 1097.27 193.584 1102.91 196.986C1103.8 197.521 1104.63 198.021 1105.4 198.489L1105.42 198.501L1105.42 198.502C1109.78 201.153 1112.48 202.787 1115.84 204.093C1119.24 205.411 1123.72 206.478 1131.03 206.285C1154.05 205.68 1173.5 189.183 1179.88 181.118C1186.04 173.319 1197.36 171.993 1205.16 178.157C1212.96 184.321 1214.29 195.641 1208.12 203.44C1198.16 216.042 1169.75 241.279 1131.97 242.273C1130.82 242.303 1129.68 242.314 1128.57 242.305C1133.33 258.419 1134.07 274.623 1132.98 286.833C1132.48 304.622 1127.45 330.872 1113.37 353.731C1098.65 377.633 1073.71 398.049 1035.3 399.761C1016.49 400.6 1000.13 396.54 986.746 387.839C973.423 379.174 964.374 366.767 958.654 353.084C957.567 350.484 956.593 347.822 955.726 345.109C950.129 353.256 944.108 360.617 937.633 367.123C915.098 389.763 887.425 401.599 855.253 400.264C827.374 399.106 804.69 381.103 789.394 360.481C787.144 357.447 785.003 354.293 782.981 351.043C780.045 353.791 777.012 356.501 773.883 359.151C746.667 382.201 710.797 401.855 667.55 400.774C629.126 399.813 605.87 377.168 592.857 351.394C524.435 412.013 449.017 402.399 406.702 373.659C389.694 383.477 365.907 391.847 342.831 395.94C329.614 398.284 315.846 399.372 303.036 398.232C290.437 397.109 277.186 393.688 266.576 385.585C254.635 376.467 249.782 363.488 248.073 351.303C246.404 339.402 247.449 326.407 248.954 314.466C249.702 308.531 250.619 302.474 251.503 296.64L251.503 296.638L251.503 296.636L251.573 296.176C252.491 290.115 253.371 284.277 254.083 278.561C255.529 266.959 256.109 257.068 255.129 248.932C253.727 237.29 250.059 231.039 246.747 227.742C243.535 224.546 239.239 222.697 233.548 222.476C221.252 222.001 204.368 229.533 192.257 243.887C181.424 256.726 171.454 280.981 163.365 309.18C155.493 336.619 150.138 365.064 147.3 383.953C145.824 393.784 136.657 400.556 126.826 399.08C116.995 397.603 110.223 388.436 111.7 378.605C114.176 362.121 118.461 338.729 124.628 314.536C114.441 322.176 103.267 329.97 92.2581 337.361C67.9543 353.678 42.862 369.073 27.1008 378.309C18.5239 383.335 7.49638 380.457 2.47015 371.88C-2.55609 363.303 0.322276 352.276 8.89916 347.249C24.1379 338.319 48.5956 323.314 72.1918 307.472C96.2367 291.329 117.857 275.32 128.568 264.258C129.684 263.106 130.917 262.134 132.229 261.345C133.544 248.873 134.869 235.507 136.238 221.692C137.898 204.937 139.624 187.52 141.478 170.235C144.112 145.666 146.993 121.537 150.282 100.651C153.515 80.1128 157.324 61.4645 162.123 48.5214C174.507 15.1219 202.629 -3.84385 231.169 2.0204ZM1058.25 218.549C1054.37 218.069 1049.84 217.779 1044.5 217.779C1029.89 217.779 1018.18 224.842 1008.79 235.382C999.186 246.151 993.196 259.364 990.807 267.724C990.713 268.055 990.61 268.38 990.499 268.701C990.469 269.915 990.315 271.145 990.028 272.375C984.268 297.028 984.64 321.905 991.869 339.2C995.362 347.555 1000.23 353.665 1006.37 357.66C1012.46 361.618 1021.11 364.358 1033.7 363.797C1058.08 362.71 1073.06 350.542 1082.72 334.853C1092.85 318.406 1096.72 298.428 1097 285.39L1097.02 284.723L1097.08 284.058C1098.27 271.701 1096.55 254.062 1089.09 240.294C1083.44 229.881 1074.38 221.127 1058.25 218.549ZM803.057 270.745C801.13 273.614 799.014 276.702 796.714 279.949C795.11 263.324 795.497 244.552 797.366 224.561C800.486 191.208 807.525 156.374 814.543 125.808C821.933 93.6268 832.945 69.8684 844.192 55.7801C855.879 41.1408 863.714 41.1233 867.158 42.305C870.552 43.4694 872.464 44.8457 873.729 46.2842C874.999 47.7278 876.552 50.2951 877.549 55.3009C879.705 66.123 878.659 85.0365 870.541 117.4C856.785 172.241 823.573 238.764 804.375 268.521C804 269.103 803.662 269.698 803.362 270.304C803.258 270.449 803.157 270.596 803.057 270.745ZM611.996 275.273C635.439 243.095 665.613 196.229 677.165 154.93C687.061 119.554 692.514 90.9455 692.625 70.2448C692.743 48.4264 687.118 42.6473 683.691 40.9972C679.789 39.1182 671.477 38.0996 658.661 53.8826C646.113 69.3338 633.582 96.8751 625.651 136.53C614.254 193.511 612 222.993 612 265.779C612 266.114 611.991 266.447 611.973 266.777C611.998 267.242 612.006 267.711 611.995 268.185C611.945 270.415 611.943 272.788 611.996 275.273ZM173.47 211.099C193.579 188.832 229.823 140.32 237.612 70.7757C240.445 45.4779 229.329 38.3945 223.924 37.2837C217.578 35.9798 203.95 39.264 195.877 61.037C192.426 70.3439 189.047 85.904 185.843 106.251C182.694 126.251 179.888 149.684 177.272 174.073C175.966 186.254 174.704 198.722 173.47 211.099ZM410.873 328.534C402.595 317.802 398.353 303.304 398.312 287.188C398.259 265.885 405.658 245.133 416.573 232.602C430.584 216.516 447.828 214.864 458.741 219.712C464.225 222.148 468.503 226.294 470.921 231.894C473.333 237.477 474.41 245.741 471.186 257.077C461.75 290.263 434.913 314.532 410.873 328.534Z" fill="white"/>
</svg>
但是他实现了描边动画。原理是动画开始时，路径不可见，因为stroke-dasharray的第一个值为0，代表线段长度为0。随着动画的进行，第一个值逐渐增加至1000，意味着线段的长度逐渐增加，直到覆盖整个路径。同时，第二个值从1000减少到0，间隙长度逐渐减少至0。这样，到动画结束时，整个路径都将显示出来，就像线条逐渐被绘制出来一样。
这是可以的，通过缩短svg的path的线粗，他的描边确实不会像之前那样一条线描边描两次，我想有没有一直可能他之所以描边描两次是我用Figma导出这个SVG的时候其实我导出的并不是一条线粗很粗的线，而是一个闭合的轮廓图？我想这完全是有可能的。但我又遇到了一个新的问题。
就是他会有多个点一起开始描线这导致他缺少了那种书写感。我想这应该stroke-dasharray的线长不够长的原因，因为stroke-dasharray本质就是虚线效果的，如果单个虚线线长不够长，自然会有这种多个一起绘画的效果。加到5000后顺利解决了这个问题。
<svg height="3000px" cursor="default" id="svg_document" width="3000px">
<path stroke="#A3CB5C" stroke-width="30px"
d="M127.286 1C22.6195 236.667 -114.814 655.9 172.786 447.5C460.386 239.1 399.953 138.667 333.786 114.5L693.786 85.5C728.286 120.167 748.886 227.9 555.286 381.5C361.686 535.1 819.286 311.833 1072.29 181C1211.29 47.8333 1447.59 -136.2 1280.79 193C1072.29 604.5 1417.29 315.5 1429.79 305C1442.29 294.5 1518.79 152 1568.29 181C1617.79 210 1822.79 360 1824.79 422.5C1826.39 472.5 1760.79 606 1727.79 666.5"
fill="none">
<animate values="0,5000;5000,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1"
repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="2"></animate>
</path>
</svg>
然后现在再画一个好看的路径，导出看看效果！
<svg height="3000px" cursor="default" id="svg_document" width="3000px">
<path stroke="#A3CB5C" stroke-width="30px"
d="M489.596 462.636C490.333 496.782 473.426 559 407.926 597C349.04 631.163 297.577 601.921 279.316 582.515C279.273 582.464 279.23 582.414 279.187 582.364M288.651 577.602C290.321 576.85 292.044 576.056 293.815 575.221M293.815 575.221C346.84 550.217 442.564 488.45 424.497 430.209C402.408 359 295.5 430.209 273.912 490.395C264.023 517.962 261.396 561.424 279.187 582.364M293.815 575.221C289.332 577.641 284.426 580.037 279.187 582.364M293.815 575.221C294.876 574.649 295.913 574.075 296.926 573.5M279.187 582.364C241.135 599.262 185.496 612.48 146.663 604.132C41.5228 581.532 58.3093 480.575 80.5 433C80.8768 431.605 81.4301 429.963 82.1638 428.092M82.1638 428.092C91.6362 403.93 131.177 341.411 209.059 275.202C362.937 149.82 421.303 163.184 435.797 197.33C444.395 213.625 449.259 262.87 388.14 311.804C240.343 429.063 127.402 439.708 87.9198 429.592M82.1638 428.092C24.4183 410.919 -34.1701 329.962 26.9263 237C89.568 141.687 182.12 164.248 213.482 185.784M82.1638 428.092C84.0849 428.663 86.005 429.164 87.9198 429.592M87.46 429.472C87.6121 429.513 87.7654 429.553 87.9198 429.592M87.9198 429.592C88.5042 429.723 89.0881 429.847 89.6713 429.964M253.539 143.479C289.077 140.859 358.532 106.926 367.769 1C257.323 25.9584 241.449 104.912 248 143.479"
fill="none">
<animate values="0,5000;5000,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1"
repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="10"></animate>
</path>
</svg>
结果发现，他们仍然是多条直线开始绘画的。这个问题很有可能是这个svg并不是一笔画的原因导致的，他可能是因为使用了多个线段合成的原因。
是这样的，我自己画了一个小鹿，成功了，就是有点丑。
同样的道理，我画了一个Hello，他也成功了。
!不过值得注意的是请确保你的SVG他是一笔画的形式，如果有相连的点，想连的点会自成一体。
<svg height="3000px" cursor="default" id="svg_document" width="3000px">
<path stroke="#A3CB5C" stroke-width="30px"
d="M1 256.452C56.9375 258.495 200.281 114.718 233 27.4518C218.783 -8.62859 199.897 -6.99648 150.5 27.4518C115.784 148.346 81.5 465.451 109.5 297.452C137.5 129.452 267.5 107.952 233 297.452C273.043 319.691 292.759 313.134 325.5 284.452C359.483 254.621 375.287 235.465 391 191.952C370.972 165.525 355.767 160.976 313.5 191.952C309.333 269.891 323.436 287.896 363 297.452C388.648 304.99 399.325 303.577 416 297.452C461.957 271.695 482.929 249.496 514.5 200.452C537.504 160.874 552.5 86.4517 552.5 86.4517C557.552 61.9086 554.121 41.5467 539.5 10.9516C495.219 4.77977 481.978 17.2377 470 55.4517C460.058 117.289 462.387 133.54 470 154.452C472.297 263.672 489.667 267.986 514.5 297.452C559.997 314.835 590.173 296.117 651.5 216.952C684.416 156.273 729.5 76.9517 706 43.9517C682.5 10.9516 650.793 -10.7239 618.5 70.4517C605.397 140.725 605.2 176.373 618.5 233.452C643.843 287.399 692.5 308.952 692.5 308.952L768.5 191.952C797.554 154.763 821.595 161.53 872 200.452C870.776 262.648 857.668 281.361 821 297.452L747.5 256.452"
fill="none">
<animate values="0,19000;19000,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1"
repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="10"></animate>
</path>
</svg>
学会了画连笔字应该做什么？当然是先，哄哄女朋友去啦！o(￣▽￣)ブ
<svg height="560" cursor="default" id="svg_document" width="700">
<path stroke="#A3CB5C" stroke-width="10px"
d="M49.9978 0.5H79.9978C65.85 10.6136 51.1652 13.7792 22.4978 18.5H101.998C80.5163 29.642 65.0198 32.588 36.4978 37H83.4978C93.8609 40.3366 95.2777 43.91 95.9978 51V78C92.3787 85.6993 89.11 88.2826 80.4978 89H41.4978C36.4254 86.9107 33.9585 84.9126 31.9978 76V48C31.3695 45.7339 31.3514 44.3413 34.9978 40.5V107H86.4978C92.7938 109.416 94.6346 111.779 92.9978 119L75.4978 138.5C70.0915 147.411 68.477 152.11 68.4978 160.5V233.5C63.5241 239.902 59.7113 241.095 51.4978 240C46.2475 205.967 42.8527 186.957 20.9978 155.5C56.6017 166.083 75.3851 165.205 107.498 155.5L121.998 240V16C123.224 10.1593 124.647 8.02404 128.998 7H147.498C157.049 9.80399 159.744 13.1426 160.498 22V78C156.3 87.7356 153.189 91.4152 145.498 93C157.085 95.9931 160.015 100.209 160.498 111L159.498 187C155.517 198.176 151.193 201.873 136.998 200.5C170.944 157.333 185.402 126.399 200.498 55.5L198.998 235L251.998 222.5L222.498 225V9H192.998V7H253.498V9H223.998V117C241.528 118.342 247.662 114.732 246.498 94V57C261.728 42.0454 266.256 32.1029 269.498 12.5C266.261 24.4536 268.053 28.5447 277.998 31H332.998L321.498 36C307.538 124.117 293.793 168.042 263.998 241.5C268.63 174.805 275.045 138.732 267.998 68C275.702 62.8022 279.398 64.4554 284.498 75L334.498 240C347.726 168.119 354.437 127.575 356.998 52H504.998L481.998 28C485.998 132 467.498 148.5 359.998 240C373.506 155.106 378.163 102.603 381.998 1.5V77.5C388.566 124.414 396.402 146.57 424.498 172L504.998 240C520.69 175.37 528.873 138.871 529.998 68H675.498C631.696 60.414 615 46.5691 601.498 2V231C579.598 232.466 567.069 234.233 543.998 240C591.213 228.379 616.501 229.29 659.998 241.5C970.493 273.673 -187.227 249.559 27.9978 318H58.9978C70.262 317.623 75.1561 315.276 81.4978 307.5C77.2205 314.595 73.186 317.769 58.9978 320L57.4978 531.5C50.2889 539.446 44.625 539.993 33.4978 538.5L21.4978 465L86.9978 419.5L21.4978 368.5H162.998C165.818 359.132 165.364 353.447 162.998 343L153.998 304.5C137.151 298.814 125.634 297.631 101.498 299C114.834 298.887 119.596 303.283 119.998 324.5C125.893 443.251 137.826 483.854 164.998 538.5H83.9978C100.026 476.794 119.454 446.462 162.998 396C186.044 366.103 190.537 344.311 201.998 307.5H303.998C312.611 304.525 316.937 302.033 323.998 296.5L313.998 324.5L307.498 350.5C283.881 343.782 274.298 336.846 259.498 322.5L265.998 350.5C242.077 342.524 231.212 335.658 212.498 322.5L218.998 350.5L194.498 431C195.852 422.734 196.286 417.482 196.998 408V382C199.284 371.196 201.993 366.717 212.498 365H313.998C322.511 367.027 326.242 369.8 329.498 380V411.5C330.234 421.868 330.727 426.786 331.998 431L247.998 384C229.227 423.641 218.215 445.036 196.998 480.5C193.145 477.637 203.002 425.458 216.498 400H307.498L297.998 433C303.493 442.414 303.691 449.174 301.498 462.5C293.926 478.213 288.414 486.181 274.998 498L218.998 538.5L268.998 500L321.498 539.5L265.498 496.5C255.498 491 249.701 483.139 242.498 469.5C237.783 459.34 234.684 453.989 238.998 437C244.653 429.953 248.388 428.681 255.498 428.5C262.834 430.674 266.168 433.113 270.498 440C274.278 432.649 277.169 430.23 283.498 428.5C288.469 428.656 291.124 428.875 293.998 431L296.498 433C341.443 470.877 362.602 493.31 382.998 538.5V396C382.17 386.068 378.309 383.142 366.498 384C359.004 378.982 357.497 375.072 362.498 365L392.498 300H421.998C410.896 316.146 414.592 320.517 434.498 322H489.498C498.935 322.651 501.596 325.602 500.998 336L493.998 349.5L457.498 345V525.5C456.269 535.545 452.292 537.79 441.998 538.5H404.498L420.998 385.5L506.498 538.5L491.998 385.5"
fill="none">
<animate values="0,19000;19000,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1"
repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="10"></animate>
</path>
</svg>
具体效果可以看:https://www.jrenc.com/guestbook
哄完女朋友了让我们继续看看现在的任务进度，目前看来还有一下几个问题。
- 写出来的东西太直，不是那种柔和的曲线。
- 只能写一笔画。
- 颜色问题，没能像苹果那样五彩斑斓花里胡哨。
这个问题可以通过两个属性解决，stroke-linejoin和stroke-linecap。 stroke-linejoin 和 stroke-linecap 是SVG中的两个属性，用于控制线条的连接处和端点的外观。
stroke-linejoin stroke-linejoin 属性用于设置两条线段相交时，它们的连接处应该如何显示。这个属性主要影响多边形、折线、路径等由多个直线或曲线段组成的图形的外观。stroke-linejoin 有以下几个可能的值： miter：默认值。在连接处外侧延伸直至相交于一点，形成一个尖角。miter 类型的连接可能会在尖角处产生非常尖锐的角。如果尖角太尖，则会根据 stroke-miterlimit 属性的设置被削成斜角或圆角。 round：在连接处用一个圆来平滑过渡，形成一个圆角。 bevel：在连接处用一个斜面（切去尖角部分）来平滑过渡，形成一个斜角。
stroke-linecap stroke-linecap 属性定义了线条末端（即开放路径的端点）的形状。这个属性对于线条、折线段的端点非常有用。stroke-linecap有以下几个可能的值：
butt：默认值。线条以直线结束，线条的末端正好在端点上。 round：线条以一个半圆结束，半圆的直径等于线条的宽度，使得线条的末端呈圆形。 square：线条以一个矩形结束，这个矩形的长度等于线条宽度的一半，并且与线条本身平行，使得线条的末端呈方形。 通过适当地设置这些属性，可以改善图形的视觉效果，特别是在需要精细控制线条连接方式和端点形状的情况下。例如，在绘制一个封闭的多边形或者需要模拟笔迹效果的图形时，合理选择 stroke-linejoin 和 stroke-linecap 的值能显著影响最终图形的外观。
OK，我想现在第一个问题已经解决了只需要配置stroke-linejoin="round"和stroke-linecap="round"。效果如下图。
其实这并不是一个复杂的问题，他之所以只能一笔画是因为，我代码只设置了一个动画，如果我想要设置多个笔画，那我就要设置多个animate然后再通过调整他们的时间关系去一步步运行，就像PPT动画一样。
<g id="main_group">
<path stroke="black" stroke-linejoin="round" id="path1" stroke-width="15.75px"
d="M23,213 C54.5,213 165.800003,98.900002 118.199997,98.200005 C70.599998,97.5 75.5,238.899994 75.5,238.899994 C75.5,238.899994 77.599998,172.399994 116.099998,172.399994 C154.599991,172.399994 109.799995,237.5 143.399994,239.600006 C177,241.699997 225.300003,175.899994 190.300003,174.5 C155.300003,173.100006 156,236.100006 202.899994,238.199997 C249.800003,240.300003 303.699982,105.900002 262.399994,103.099998 C221.099991,100.300003 228.800003,234.699997 270.799988,237.5 C312.799988,240.300003 373.699982,104.5 331,102.400002 C288.299988,100.300003 293.199982,236.800003 337.299988,237.5 C365.299988,236.100006 356.199982,171.699997 392.600006,173.100006 C412.899994,174.5 421.299988,189.899994 420.600006,189.199997 C419.899994,188.5 426.899994,236.800003 389.799988,236.800003 C352.699982,236.800003 356.899994,171.699997 392.600006,173.100006 C424.799988,175.899994 420.600006,203.899994 421.299988,196.199997 C421.299988,196.899994 444.399994,189.199997 447.899994,173.800003"
fill="none" stroke-linecap="round" transform="">
<animate dur="5" values="0,1739;1739,0;" begin="0; animate1.end+5s" id="animateSig1"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<circle stroke="black" id="circle1" stroke-width="3px" cy="231.5px" fill="black" r="10.5px" cx="450.5px"
transform="">
<set dur="5.25s" begin="animateSig1.begin" id="set1" attributeName="r" to="0"
attributeType="XML"></set>
<animate additive="replace" dur="0.25s" begin="animateSig1.end+0.25s" id="animate1" values="0;10.5;"
accumulate="none" fill="freeze" attributeName="r"
attributeType="XML"></animate>
</circle>
</g>
这是一个hello.的动画，对于它的实现而言，"hello"是一笔，"."是一笔。 这段代码中的时间控制是通过 和 元素中的 dur（持续时间）、begin（开始时间）和 repeatCount（重复次数）属性实现的。 元素：这个元素用于给路径 () 添加动画效果。其属性如下解释： dur="5"：动画的持续时间为5秒。 begin="0; animate1.end+5s"：动画的开始时间。0 表示从SVG加载完成后立即开始。animate1.end+5s 应该意味着这个动画会在另一个ID为 animate1 的动画结束后5秒再开始。 repeatCount="0"：表示动画不会重复。然而，这可能是个错误，因为设置为 "0" 通常不会执行动画。如果意图是让动画只播放一次，应该设置为 "1" 或者完全省略这个属性。 元素：这个元素用于在动画开始时立即改变圆形 () 的半径（r属性）。
dur="5.25s"：尽管 元素通常用于立即执行的变化，这里的 dur 属性可能是用来指定在动画结束后的延迟时间，但这并不是 元素标准的用法。 begin="animateSig1.begin"：这表示 动画将在 ID 为 animateSig1 的动画开始时同步开始。 第二个 元素：这个元素再次为圆形添加动画效果，使圆的半径从0变为10.5px。
dur="0.25s"：动画的持续时间为0.25秒，较短，意味着圆形的出现将是迅速的。 begin="animateSig1.end+0.25s"：这表示动画将在 animateSig1 动画结束后0.25秒开始，确保圆形在路径动画结束后出现。 总的来说，这段代码通过精确设置动画的 begin 和 dur 属性来控制动画的时间线。路径动画首先播放，持续5秒。然后，圆形的半径几乎立即变为0，紧接着在路径动画结束后的0.25秒内迅速从0变为10.5px，从而实现了一种路径绘制完成后圆形突然出现的效果。然而，代码中可能存在一些逻辑错误，如 repeatCount 设置为 "0" 和对不存在的 animate1 动画的引用，这可能需要进一步的修正。
动画元素在SVG动画中用来在无任何过渡效果的情况下，瞬间改变元素的一个属性值。它不像 或 那样在指定的时间内平滑地变化属性值，而是立即改变属性值，就像直接设置属性一样。 元素主要用于以下场景： 在特定时刻立即改变元素的外观或行为，如颜色、透明度、显示/隐藏状态等。 作为复杂动画序列中的一部分，用于在不同阶段初始化或重置元素的状态。 元素的主要属性包括：
attributeName：要改变的属性名。 to：属性改变后的值。 begin：动画开始的时间。可以是绝对时间（如“5s”表示5秒后开始），也可以是相对时间（如“animate1.end”表示在ID为“animate1”的动画结束时开始）。 dur（持续时间）：通常不适用于元素，因为是瞬间改变属性值，没有持续时间的概念。但是，在某些实现中可能会看到它被用来表示延迟结束的时间。 repeatCount：定义动画重复的次数。对于来说，通常是"1"或者不设置，因为它是瞬间改变。 例如，如果你想在动画序列的某个点让一个圆形突然消失，你可以使用元素将圆形的fill属性瞬间设置为“none”，从而使圆形不可见。
<!--<div style="width: 100vw;height: 100vh;justify-content: center;display: flex;align-items: center">-->
<!-- -->
<!-- <svg height="600" cursor="default" id="svg_document" width="700">-->
<!-- <path stroke="#A3CB5C" stroke-width="10px" stroke-linejoin="round" stroke-linecap="round"-->
<!-- d="M49.9978 0.5H79.9978C65.85 10.6136 51.1652 13.7792 22.4978 18.5H101.998C80.5163 29.642 65.0198 32.588 36.4978 37H83.4978C93.8609 40.3366 95.2777 43.91 95.9978 51V78C92.3787 85.6993 89.11 88.2826 80.4978 89H41.4978C36.4254 86.9107 33.9585 84.9126 31.9978 76V48C31.3695 45.7339 31.3514 44.3413 34.9978 40.5V107H86.4978C92.7938 109.416 94.6346 111.779 92.9978 119L75.4978 138.5C70.0915 147.411 68.477 152.11 68.4978 160.5V233.5C63.5241 239.902 59.7113 241.095 51.4978 240C46.2475 205.967 42.8527 186.957 20.9978 155.5C56.6017 166.083 75.3851 165.205 107.498 155.5L121.998 240V16C123.224 10.1593 124.647 8.02404 128.998 7H147.498C157.049 9.80399 159.744 13.1426 160.498 22V78C156.3 87.7356 153.189 91.4152 145.498 93C157.085 95.9931 160.015 100.209 160.498 111L159.498 187C155.517 198.176 151.193 201.873 136.998 200.5C170.944 157.333 185.402 126.399 200.498 55.5L198.998 235L251.998 222.5L222.498 225V9H192.998V7H253.498V9H223.998V117C241.528 118.342 247.662 114.732 246.498 94V57C261.728 42.0454 266.256 32.1029 269.498 12.5C266.261 24.4536 268.053 28.5447 277.998 31H332.998L321.498 36C307.538 124.117 293.793 168.042 263.998 241.5C268.63 174.805 275.045 138.732 267.998 68C275.702 62.8022 279.398 64.4554 284.498 75L334.498 240C347.726 168.119 354.437 127.575 356.998 52H504.998L481.998 28C485.998 132 467.498 148.5 359.998 240C373.506 155.106 378.163 102.603 381.998 1.5V77.5C388.566 124.414 396.402 146.57 424.498 172L504.998 240C520.69 175.37 528.873 138.871 529.998 68H675.498C631.696 60.414 615 46.5691 601.498 2V231C579.598 232.466 567.069 234.233 543.998 240C591.213 228.379 616.501 229.29 659.998 241.5C970.493 273.673 -187.227 249.559 27.9978 318H58.9978C70.262 317.623 75.1561 315.276 81.4978 307.5C77.2205 314.595 73.186 317.769 58.9978 320L57.4978 531.5C50.2889 539.446 44.625 539.993 33.4978 538.5L21.4978 465L86.9978 419.5L21.4978 368.5H162.998C165.818 359.132 165.364 353.447 162.998 343L153.998 304.5C137.151 298.814 125.634 297.631 101.498 299C114.834 298.887 119.596 303.283 119.998 324.5C125.893 443.251 137.826 483.854 164.998 538.5H83.9978C100.026 476.794 119.454 446.462 162.998 396C186.044 366.103 190.537 344.311 201.998 307.5H303.998C312.611 304.525 316.937 302.033 323.998 296.5L313.998 324.5L307.498 350.5C283.881 343.782 274.298 336.846 259.498 322.5L265.998 350.5C242.077 342.524 231.212 335.658 212.498 322.5L218.998 350.5L194.498 431C195.852 422.734 196.286 417.482 196.998 408V382C199.284 371.196 201.993 366.717 212.498 365H313.998C322.511 367.027 326.242 369.8 329.498 380V411.5C330.234 421.868 330.727 426.786 331.998 431L247.998 384C229.227 423.641 218.215 445.036 196.998 480.5C193.145 477.637 203.002 425.458 216.498 400H307.498L297.998 433C303.493 442.414 303.691 449.174 301.498 462.5C293.926 478.213 288.414 486.181 274.998 498L218.998 538.5L268.998 500L321.498 539.5L265.498 496.5C255.498 491 249.701 483.139 242.498 469.5C237.783 459.34 234.684 453.989 238.998 437C244.653 429.953 248.388 428.681 255.498 428.5C262.834 430.674 266.168 433.113 270.498 440C274.278 432.649 277.169 430.23 283.498 428.5C288.469 428.656 291.124 428.875 293.998 431L296.498 433C341.443 470.877 362.602 493.31 382.998 538.5V396C382.17 386.068 378.309 383.142 366.498 384C359.004 378.982 357.497 375.072 362.498 365L392.498 300H421.998C410.896 316.146 414.592 320.517 434.498 322H489.498C498.935 322.651 501.596 325.602 500.998 336L493.998 349.5L457.498 345V525.5C456.269 535.545 452.292 537.79 441.998 538.5H404.498L420.998 385.5L506.498 538.5L491.998 385.5"-->
<!-- fill="none">-->
<!-- <animate values="0,19000;19000,0;" attributeType="XML" begin="0; animate1.end+5s" id="animateSig1"-->
<!-- repeatCount="indefinite" attributeName="stroke-dasharray" fill="freeze" dur="10"></animate>-->
<!-- </path>-->
<!-- </svg>-->
<!--</div>-->
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="360px"
viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;">
<g id="main_group">
<path stroke="black" stroke-linejoin="round" id="path1" stroke-width="15.75px" transform="translate(0, 50)"
d="M1 70.5C18.5 68 27 54.5 42.5 9L42.8248 122C36 147 2.83868 146 7.5922 123.5C15.0922 88 35.3924 75.4832 62 70.5C91.6172 64.5403 102.582 54.376 93 1L96.5 14.5L115 11.5C132.595 7.66192 134.715 14.2463 134.5 30.5V54C135 67 141.5 69.5 155 68C184.708 64.6991 202.846 50.4916 203.5 25C204 5.5 184.5 2 171.5 21C162.282 34.473 171.665 51.2859 186.5 65.5C199 75 219.481 73.9538 226.5 61.5C236.081 44.5 235.606 28.6 243.5 17.5C251.394 6.39996 259 8 264.5 16.5C270 25 268 70 268 70C272.377 30.7793 276 9.5 291.5 9.5C309.186 9.5 309.809 25.2507 310 70C311.768 18.7772 319 9.5 334 9.5C345.5 9.5 351.5 18.5 351.5 54.5C351.5 79.0424 385.5 69.5 388.5 54.5C402.9 66.9974 407.811 63.5542 418.5 65C367.5 74 378 -8 427.5 14.5"
fill="none" stroke-linecap="round" >
<animate dur="5" values="0,1739;1739,0;" begin="0; animate1.end+5s" id="animateSig1"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<circle stroke="black" id="circle1" stroke-width="3px" cy="30" fill="black" r="5px" cx="40"
transform="">
<set dur="5.25s" begin="animateSig1.begin" id="set1" attributeName="r" to="0"
attributeType="XML"></set>
<animate additive="replace" dur="0.25s" begin="animateSig1.end+0.25s" id="animate1" values="0;10.5;"
accumulate="none" fill="freeze" attributeName="r"
attributeType="XML"></animate>
</circle>
</g>
</svg>
大概长这样。
然后基于此，深化一下就做出来了‘你妈’的文字动画。
<svg width="800px" height="360px" viewBox="0 0 480 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<path stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px"
d="M1 28.5C5.74068 17.6646 8.34689 12.561 13 5.5L8 15.5L8.5 49.5" >
<animate dur="0.5s" values="0,200;200,0;" begin="0" id="animateSig1"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<path d="M29.5 0.5C26.7031 7.75429 23.01 14.2983 17.5 21.5C34 3 57.5 9.5 43.5 23.5" stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px">
<animate dur="0.5s" values="0,200;200,0;" begin="animateSig1.end" id="animateSig2"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<path d="M32.0001 20.5C37.0881 32.5014 36.1524 37.3503 34.0007 47C32.5514 53.5 19.6397 55.495 20.0006 42.5C20.5004 24.5 63.5001 31 45.5007 49.5" stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px">
<animate dur="0.5s" values="0,200;200,0;" begin="animateSig2.end" id="animateSig3"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<path d="M77.8325 2C67.1668 23.8894 65.5201 35.2083 84.8325 50.5" stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px">
<animate dur="0.5s" values="0,200;200,0;" begin="animateSig3.end" id="animateSig4"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<path d="M90.5 14.5C72.4569 16.8684 63.5001 24.5 60 34C56.5 43.5 70.5 56 78 44.5C85.5 33 85 29 86 18.5" stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px">
<animate dur="0.5s" values="0,200;200,0;" begin="animateSig4.end" id="animateSig5"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<path d="M95 7.95511C110.111 -2.43509 122 4.5855 107.5 19.0857" stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px">
<animate dur="0.5s" values="0,200;200,0;"begin="animateSig5.end" id="animateSig6"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
<path d="M129.841 32.5856C129.841 32.5856 98.3409 27.5857 92.3409 37.0857C86.3409 46.5857 101.841 53.0856 111.841 50.0857C121.841 47.0858 122.341 24.0858 116.841 20.5857C111.341 17.0856 103.5 21.5857 101 20.5857C98.5 19.5857 101 14.5 104 11" stroke-dasharray="0,200" stroke="black" stroke-linejoin="round" stroke-width="3px">
<animate dur="0.5s" values="0,200;200,0;" begin="animateSig6.end" id="animateSig7"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
</svg>
在我实际操作中，因为我匮乏的艺术细胞画出来的字体都很丑.
而且在英文字体里，我发现了一种字体名为Borel的字体，它可以完美的实现出连笔字的效果。我想是否可以采用一种计算方式，实现输入文字便能转换出文字线条svg？
搜索发现，这个领域叫做文字图像骨架提取。这个方向挺有意思的。但仔细想了想感觉还是做应用层比较适合我，做研究太需要魄力。面向用户解决用户问题，我更喜欢。
我个人网站，YOLO的文字动画
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="360px"
viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet" id="svg_document" style="zoom: 1;">
<g id="main_group">
<path stroke="black" stroke-linejoin="round" id="path1" stroke-width="15.75px" transform="translate(0, 50)"
d="M2 183.099C4.4 180.832 7.19999 177.965 10.4 174.499C13.6 171.032 16.7333 166.899 19.8 162.099C22.8667 157.165 25.4 151.632 27.4 145.499C29.5333 139.365 30.6 132.499 30.6 124.899V100.699V146.899C30.6 169.032 40.6 184.999 63.6 184.999C77.6 184.999 89 176.299 93.4 168.699C97.9333 160.965 100.2 150.432 100.2 137.099V100.699V248.199C100.2 279.399 87.6002 286.998 75.2 286.998C64.6667 286.998 60.6002 282.998 56.6002 278.998C52.6002 273.998 50.4 268.498 50.4 259.399C50.4 239.498 67.3266 216.099 101.1 195.999L144.301 165.8C141.101 159.72 139.341 153.819 139.341 146.139C139.341 138.459 140.995 131.633 144.301 125.659C148.581 118.598 151.495 115.469 157.741 111.579C163.501 108.059 169.955 106.299 177.101 106.299C184.248 106.299 190.648 108.059 196.301 111.579C203.354 116.718 206.079 119.831 209.581 125.659C212.888 131.633 214.541 138.459 214.541 146.139C214.541 153.819 212.888 160.699 209.581 166.779C206.381 172.859 201.955 177.659 196.301 181.179C190.755 184.593 184.355 186.299 177.101 186.299C169.848 186.299 163.341 184.593 157.581 181.179C151.782 176.209 147.902 173.596 144.301 166.119C141.48 159.3 138.98 154.8 139.48 146.139C139.98 138.3 139.98 133.3 144.372 125.659C148.739 118.414 151.764 115.59 157.741 111.8C162.726 108.922 163.146 108.809 168.941 107.9C172.675 112.966 177.741 116.966 184.141 119.9C190.675 122.833 198.08 126.833 206.08 127.1H211.48C216.414 127.1 221.414 126.7 226.48 125.9C231.414 125.1 239.68 123.166 244.88 121.7C250.267 120.805 253.544 119.473 256.48 118.3C266.08 114.3 270.433 109.283 277.9 101.95C285.367 94.4832 291.233 85.6165 295.5 75.3498C299.9 65.0831 302.1 53.6831 302.1 41.1498C302.1 29.0498 299.7 20.3998 295.5 13.4998C291.3 6.59981 285.3 3.14981 277.5 3.14981C273.6 3.14981 272.3 3.9 269 5.5C265.8 7.1 264.441 9.90002 262.241 13.5C260.148 16.9119 259.32 18.6878 258.491 21.6C257.591 24.5 256.841 28.05 256.241 32.25C255.641 36.45 255.241 41.65 255.041 47.85C254.841 54.05 254.741 61.6 254.741 70.5V142.3L255.08 153.7C255.28 157.6 255.58 160.8 255.98 163.3C256.38 165.7 256.83 167.9 257.33 169.9C258.93 175.7 261.73 180.2 265.73 183.4C268.515 185.786 272.288 186.987 277.05 187C285.183 187 294.773 183.777 302.5 179.5C310.227 175.223 317.968 167.253 322.406 161.899L321.046 158.194C320.145 155.3 319.579 152.271 319.38 148.914C319.364 148.035 319.383 147.114 319.439 146.139C319.703 141.999 319.828 138.65 320.533 135.287C320.999 133.067 321.718 130.841 322.897 128.376C323.315 127.452 323.769 126.546 324.26 125.659C328.54 118.598 331.454 115.469 337.7 111.579C343.46 108.059 349.913 106.299 357.06 106.299C364.207 106.299 370.607 108.059 376.26 111.579C383.313 116.718 386.038 119.831 389.54 125.659C389.803 126.134 390.055 126.614 390.297 127.1C393.099 132.723 394.5 139.07 394.5 146.139C394.5 153.819 392.847 160.699 389.54 166.779C386.34 172.859 381.913 177.659 376.26 181.179C370.713 184.593 364.313 186.299 357.06 186.299C349.807 186.299 343.3 184.593 337.54 181.179C331.74 176.209 327.86 173.596 324.26 166.119L322.255 161.899"
fill="none" stroke-linecap="round" ><animate dur="5" values="0,12000;12000,0;" begin="0; animate1.end+5s" id="animateSig1"
fill="freeze" attributeName="stroke-dasharray" attributeType="XML"></animate>
</path>
</g>
</svg>根据推友@pate1kiran的自动生成签名的demo制作了一个自动生成线条动画的API服务。 https://www.bilibili.com/video/BV1hDH7eEE77/