HTML/CSS 中的动画在进行更改后未执行
Animation in HTML/CSS Not Executing After Making Changes
我基本上想将 JPEG 签名转换为 SVG。我只想使用以下代码并将其更改为输出 JPEG 中显示的签名。
为此，我使用了在线签名板，将其导出为 svg，然后从记事本中提取数据。但是，我面临一些问题。请看下面。
这是代码：
// Select all <path> elements.
const paths = document.querySelectorAll('path');
/**
* Loop over each path,
* calculate the length of a path,
* set a CSS variable with the length so CSS can read the length.
*/
for (const path of paths) {
const length = path.getTotalLength();
path.style.setProperty('--path-stroke-length', length);
}
.container {
max-width: 400px;
margin: 0 auto;
}
.signature {
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 55.30973%;
}
.signature svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.signature svg path {
stroke-dasharray: var(--path-stroke-length);
animation: draw 1.5s 1.5s ease-in-out both;
}
@keyframes draw {
from {
stroke-dashoffset: var(--path-stroke-length);
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="signature">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="34.924 351.353 548.489 159.86">
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/>
</svg>
</div>
</div>
我想要相同的动画，但签名如下：
这是我用在线记事本画签名，导出svg，用记事本提取svg元素后得到的svg。也就是说，这就是上面签名的svg：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 664 373" width="664" height="373"><path d="M 126.000,276.500 C 122.687,278.906 123.500,277.000 121.000,277.500" stroke-width="5.348" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 121.000,277.500 C 117.679,271.876 116.687,273.906 114.000,266.500" stroke-width="4.324" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 114.000,266.500 C 110.467,262.818 111.179,262.376 108.000,258.500" stroke-width="3.745" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 108.000,258.500 C 105.098,251.953 104.467,252.318 102.000,245.500" stroke-width="3.232" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 102.000,245.500 C 98.793,239.595 99.098,239.453 96.000,233.500" stroke-width="3.109" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 96.000,233.500 C 93.050,227.649 93.293,227.595 91.000,221.500" stroke-width="3.164" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 91.000,221.500 C 89.500,215.500 89.050,215.649 88.000,209.500" stroke-width="3.228" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 88.000,209.500 C 85.829,203.583 86.500,203.500 85.000,197.500" stroke-width="3.189" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,197.500 C 85.000,192.500 84.329,192.583 85.000,187.500" stroke-width="3.428" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,187.500 C 85.000,183.500 85.000,183.500 85.000,179.500" stroke-width="3.697" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,179.500 C 84.402,175.385 85.000,175.500 85.000,171.500" stroke-width="3.786" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,171.500 C 85.600,168.775 85.402,168.885 87.000,166.500" stroke-width="4.072" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 87.000,166.500 C 89.824,162.356 89.600,162.275 93.000,158.500" stroke-width="3.686" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 93.000,158.500 C 96.751,153.749 96.824,153.856 101.000,149.500" stroke-width="3.339" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 101.000,149.500 C 104.855,145.816 104.751,145.749 109.000,142.500" stroke-width="3.423" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 109.000,142.500 C 112.621,140.155 112.355,139.816 116.000,137.500" stroke-width="3.584" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 116.000,137.500 C 119.084,133.609 119.621,134.655 123.000,131.500" stroke-width="3.628" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 123.000,131.500 C 125.979,130.752 125.584,130.109 129.000,130.500" stroke-width="4.359" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 129.000,130.500 C 132.094,129.919 131.979,130.252 135.000,130.500" stroke-width="4.168" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 135.000,130.500 C 139.651,131.636 139.594,131.419 144.000,133.500" stroke-width="3.761" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 144.000,133.500 C 150.545,135.705 150.151,136.136 156.000,139.500" stroke-width="3.307" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 156.000,139.500 C 162.237,143.896 162.045,143.705 167.000,149.500" stroke-width="3.023" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 167.000,149.500 C 170.399,154.298 170.737,153.896 173.000,159.500" stroke-width="3.236" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 173.000,159.500 C 177.104,165.231 175.899,165.298 178.000,171.500" stroke-width="3.142" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 178.000,171.500 C 179.271,180.120 179.104,179.231 177.000,187.500" stroke-width="2.965" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 177.000,187.500 C 173.865,192.806 175.271,193.120 170.000,197.500" stroke-width="3.175" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 170.000,197.500 C 166.500,201.000 166.865,201.306 163.000,204.500" stroke-width="3.432" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 163.000,204.500 C 159.823,208.394 159.500,208.000 156.000,211.500" stroke-width="3.462" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 156.000,211.500 C 151.838,215.384 151.823,214.894 147.000,217.500" stroke-width="3.445" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 147.000,217.500 C 143.406,217.648 143.838,218.884 140.000,218.500" stroke-width="3.798" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 140.000,218.500 C 137.594,220.284 137.406,219.148 135.000,220.500" stroke-width="4.076" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 135.000,220.500 C 130.443,221.536 131.594,220.784 128.000,219.500" stroke-width="4.637" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 128.000,219.500 C 123.244,215.143 124.443,216.536 123.000,210.500" stroke-width="4.387" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 123.000,210.500 C 124.081,204.717 122.744,205.643 127.000,200.500" stroke-width="4.306" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 127.000,200.500 C 129.258,198.283 128.581,198.217 132.000,197.500" stroke-width="4.223" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 132.000,197.500 C 136.487,196.765 136.258,196.283 141.000,196.500" stroke-width="3.761" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 141.000,196.500 C 145.000,196.500 144.987,196.265 149.000,196.500" stroke-width="3.805" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 149.000,196.500 C 152.000,196.500 152.000,196.500 155.000,196.500" stroke-width="4.001" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 155.000,196.500 C 158.866,195.455 158.500,196.500 162.000,196.500" stroke-width="3.989" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 162.000,196.500 C 164.750,198.250 164.866,197.455 167.000,200.500" stroke-width="4.100" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 167.000,200.500 C 169.590,202.679 169.250,202.750 171.000,205.500" stroke-width="4.042" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 171.000,205.500 C 173.781,209.899 173.090,209.679 174.000,214.500" stroke-width="3.730" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 174.000,214.500 C 173.386,220.608 174.281,220.399 172.000,226.500" stroke-width="3.988" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 172.000,226.500 C 171.463,229.305 171.386,229.108 170.000,231.500" stroke-width="4.140" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 170.000,231.500 C 166.679,236.689 168.463,233.805 166.000,235.500" stroke-width="4.582" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 166.000,235.500 C 164.945,229.776 164.679,233.189 166.000,224.500" stroke-width="4.849" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 166.000,224.500 C 167.519,219.718 166.945,219.776 170.000,215.500" stroke-width="3.870" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 170.000,215.500 C 173.232,211.652 172.519,211.218 176.000,207.500" stroke-width="3.575" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 176.000,207.500 C 177.302,203.198 178.232,204.152 180.000,200.500" stroke-width="3.740" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 180.000,200.500 C 183.075,197.538 181.802,198.698 185.000,198.500" stroke-width="4.586" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 185.000,198.500 C 188.098,201.696 188.075,200.038 190.000,205.500" stroke-width="4.498" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 190.000,205.500 C 191.919,209.905 192.098,209.696 193.000,214.500" stroke-width="3.838" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 193.000,214.500 C 193.749,218.484 193.919,218.405 194.000,222.500" stroke-width="3.822" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,222.500 C 194.000,226.500 194.249,226.484 194.000,230.500" stroke-width="3.771" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,230.500 C 195.606,234.493 194.000,233.500 194.000,236.500" stroke-width="4.034" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,236.500 C 189.847,240.953 191.606,239.493 186.000,240.500" stroke-width="4.642" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 186.000,240.500 C 181.135,237.946 181.347,239.953 177.000,234.500" stroke-width="3.728" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 177.000,234.500 C 172.774,229.677 172.135,230.446 168.000,225.500" stroke-width="3.290" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 168.000,225.500 C 161.272,222.948 164.774,222.677 161.000,220.500" stroke-width="3.589" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 161.000,220.500 C 163.651,216.872 160.772,218.448 167.000,216.500" stroke-width="4.667" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 167.000,216.500 C 173.010,217.443 172.651,215.872 179.000,218.500" stroke-width="3.600" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 179.000,218.500 C 181.492,219.044 181.510,218.943 184.000,219.500" stroke-width="4.080" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 184.000,219.500 C 187.712,218.899 186.992,220.044 190.000,220.500" stroke-width="4.924" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 190.000,220.500 C 191.403,224.139 192.712,222.399 194.000,226.500" stroke-width="4.918" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,226.500 C 197.322,228.924 196.903,229.139 201.000,230.500" stroke-width="4.652" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 201.000,230.500 C 204.431,231.990 204.322,231.924 208.000,232.500" stroke-width="4.639" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 208.000,232.500 C 212.934,234.337 211.431,232.990 215.000,232.500" stroke-width="4.842" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 215.000,232.500 C 217.593,228.059 217.434,230.337 217.000,224.500" stroke-width="4.957" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 217.000,224.500 C 214.315,222.867 216.593,222.059 213.000,220.500" stroke-width="4.862" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 213.000,220.500 C 210.553,216.404 211.815,218.367 212.000,215.500" stroke-width="5.126" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 212.000,215.500 C 216.500,215.500 214.553,213.904 221.000,215.500" stroke-width="4.610" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 221.000,215.500 C 226.672,213.877 226.000,215.500 231.000,215.500" stroke-width="4.422" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 231.000,215.500 C 235.438,221.188 234.672,216.877 237.000,221.500" stroke-width="4.459" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 237.000,221.500 C 236.933,218.833 237.938,221.688 236.000,216.500" stroke-width="5.093" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 236.000,216.500 C 234.777,213.784 234.933,213.833 233.000,211.500" stroke-width="4.424" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 233.000,211.500 C 231.367,208.815 231.277,209.284 229.000,207.500" stroke-width="4.280" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 229.000,207.500 C 225.368,205.360 226.867,206.315 224.000,206.500" stroke-width="4.837" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 224.000,206.500 C 223.232,209.478 222.368,207.860 223.000,212.500" stroke-width="4.953" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 223.000,212.500 C 221.489,216.695 222.732,215.978 223.000,219.500" stroke-width="4.747" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 223.000,219.500 C 226.107,223.164 224.989,223.195 230.000,225.500" stroke-width="4.738" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 230.000,225.500 C 233.929,227.247 233.607,227.664 238.000,228.500" stroke-width="4.525" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 238.000,228.500 C 243.000,228.770 240.429,229.247 243.000,229.500" stroke-width="4.927" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 243.000,229.500 C 240.601,231.027 243.000,230.270 238.000,231.500" stroke-width="5.190" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 238.000,231.500 C 235.000,231.500 235.101,232.027 232.000,231.500" stroke-width="4.421" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 232.000,231.500 C 227.500,231.500 227.500,231.500 223.000,231.500" stroke-width="3.812" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 223.000,231.500 C 216.774,231.952 220.000,231.500 217.000,231.500" stroke-width="4.003" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 217.000,231.500 C 220.427,229.976 217.274,230.952 224.000,229.500" stroke-width="4.805" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 224.000,229.500 C 228.000,229.500 227.927,228.976 232.000,229.500" stroke-width="4.074" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 232.000,229.500 C 235.000,229.500 235.000,229.500 238.000,229.500" stroke-width="4.086" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 238.000,229.500 C 243.359,231.017 242.500,229.500 247.000,229.500" stroke-width="4.333" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 247.000,229.500 C 249.368,227.240 249.359,228.517 250.000,224.500" stroke-width="5.007" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 250.000,224.500 C 248.611,219.833 250.868,220.740 250.000,216.500" stroke-width="4.661" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 250.000,216.500 C 252.149,212.690 251.111,213.833 255.000,212.500" stroke-width="4.978" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 255.000,212.500 C 260.340,213.307 259.649,212.190 265.000,215.500" stroke-width="4.463" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 265.000,215.500 C 271.372,219.244 268.840,217.307 272.000,220.500" stroke-width="4.693" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 272.000,220.500 C 269.172,220.685 272.372,221.244 267.000,219.500" stroke-width="5.161" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 267.000,219.500 C 264.022,216.973 263.672,217.685 261.000,214.500" stroke-width="4.171" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 261.000,214.500 C 258.094,210.238 258.522,212.473 256.000,210.500" stroke-width="4.535" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 256.000,210.500 C 252.746,213.216 254.094,210.738 253.000,215.500" stroke-width="5.022" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 253.000,215.500 C 254.610,218.106 253.246,217.716 257.000,219.500" stroke-width="4.866" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 257.000,219.500 C 260.950,221.150 260.610,221.606 265.000,222.500" stroke-width="4.822" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 265.000,222.500 C 268.500,223.500 268.450,223.650 272.000,224.500" stroke-width="4.883" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 272.000,224.500 C 279.234,225.562 275.500,225.500 279.000,226.500" stroke-width="4.669" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 279.000,226.500 C 275.064,228.022 278.734,227.562 271.000,228.500" stroke-width="5.018" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 271.000,228.500 C 262.900,228.500 266.564,229.022 262.000,228.500" stroke-width="3.933" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 262.000,228.500 C 265.000,228.500 261.400,228.500 268.000,228.500" stroke-width="4.865" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 268.000,228.500 C 271.727,229.318 271.500,228.500 275.000,228.500" stroke-width="4.739" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 275.000,228.500 C 277.332,226.612 277.727,227.818 280.000,225.500" stroke-width="5.175" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 280.000,225.500 C 283.471,224.382 283.332,224.112 287.000,223.500" stroke-width="4.977" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 287.000,223.500 C 289.473,222.730 289.471,222.882 292.000,222.500" stroke-width="4.917" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 292.000,222.500 C 295.021,222.252 294.973,222.230 298.000,222.500" stroke-width="4.308" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 298.000,222.500 C 301.702,221.968 301.021,222.752 304.000,223.500" stroke-width="4.636" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 304.000,223.500 C 307.734,227.032 306.202,224.968 307.000,228.500" stroke-width="5.000" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 307.000,228.500 C 304.024,229.284 306.234,230.032 301.000,229.500" stroke-width="5.011" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 301.000,229.500 C 296.984,229.749 297.024,229.784 293.000,229.500" stroke-width="4.682" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 293.000,229.500 C 287.802,230.461 288.984,229.249 285.000,228.500" stroke-width="4.568" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 285.000,228.500 C 282.029,224.684 282.802,226.961 283.000,222.500" stroke-width="4.673" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 283.000,222.500 C 285.791,219.669 284.029,220.184 289.000,219.500" stroke-width="4.982" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 289.000,219.500 C 295.764,219.768 295.291,219.169 302.000,221.500" stroke-width="4.269" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 302.000,221.500 C 304.397,223.198 304.764,222.268 307.000,224.500" stroke-width="4.165" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 307.000,224.500 C 311.670,226.191 311.397,226.698 316.000,228.500" stroke-width="3.724" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 316.000,228.500 C 319.198,230.258 319.170,230.191 322.000,232.500" stroke-width="4.336" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 322.000,232.500 C 324.277,236.746 324.198,234.258 326.000,236.500" stroke-width="4.652" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 326.000,236.500 C 328.261,234.211 327.777,236.246 329.000,231.500" stroke-width="5.154" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 329.000,231.500 C 327.791,225.984 329.761,228.711 329.000,225.500" stroke-width="5.304" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 329.000,225.500 C 331.611,227.376 330.291,224.984 334.000,229.500" stroke-width="5.179" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 334.000,229.500 C 336.399,233.957 336.111,231.376 338.000,233.500" stroke-width="5.283" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 338.000,233.500 C 338.658,228.202 339.899,232.957 341.000,227.500" stroke-width="5.316" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 341.000,227.500 C 344.844,228.492 343.658,226.702 348.000,230.500" stroke-width="4.994" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 348.000,230.500 C 349.784,234.254 350.344,231.992 352.000,234.500" stroke-width="4.426" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 352.000,234.500 C 354.541,231.276 354.284,234.754 357.000,231.500" stroke-width="5.112" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 357.000,231.500 C 360.198,233.258 360.041,231.776 363.000,235.500" stroke-width="4.773" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 363.000,235.500 C 368.353,238.598 365.198,237.258 367.000,239.500" stroke-width="5.214" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 367.000,239.500 C 360.536,240.977 363.853,241.598 354.000,241.500" stroke-width="4.643" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 354.000,241.500 C 347.941,240.863 348.036,241.977 342.000,241.500" stroke-width="3.611" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 342.000,241.500 C 334.067,243.551 333.941,242.363 326.000,244.500" stroke-width="3.061" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 218.000,263.500 C 223.981,260.952 224.000,261.000 230.000,258.500" stroke-width="4.994" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 230.000,258.500 C 237.328,254.988 237.481,255.452 245.000,252.500" stroke-width="3.303" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 245.000,252.500 C 256.172,250.031 255.828,248.988 267.000,246.500" stroke-width="2.616" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 267.000,246.500 C 278.940,241.829 279.172,242.531 291.000,237.500" stroke-width="2.281" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 291.000,237.500 C 298.591,235.244 298.440,234.829 306.000,232.500" stroke-width="2.690" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 306.000,232.500 C 311.895,229.655 312.091,230.244 318.000,227.500" stroke-width="3.020" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 241.000,266.500 C 244.728,267.641 244.500,266.500 248.000,266.500" stroke-width="5.157" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 248.000,266.500 C 265.982,258.956 266.228,260.141 284.000,251.500" stroke-width="2.058" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 284.000,251.500 C 295.229,247.491 294.982,246.956 306.000,242.500" stroke-width="2.197" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 306.000,242.500 C 315.401,237.299 315.729,237.991 325.000,232.500" stroke-width="2.391" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 325.000,232.500 C 331.460,229.407 331.401,229.299 338.000,226.500" stroke-width="2.819" stroke="black" fill="none" stroke-linecap="round"></path></svg>
问题是，如果我只将 <path> 粘贴到上面的代码中，代码将不会执行。我该如何解决？
如果将 SVG 粘贴到 div 中，则动画有效。它看起来与其他动画不一样的原因是您的签名被分解成很多小路径。
我建议您使用 Figma 通过钢笔工具创建您的签名。您将能够创建您实际想要设置动画的路径，并将导出更小的 svg.
已更新
您应该可以使用此 SVG 并对其进行一些修改，但这是基本思想。
// Select all <path> elements.
const paths = document.querySelectorAll('path');
/**
* Loop over each path,
* calculate the length of a path,
* set a CSS variable with the length so CSS can read the length.
*/
for (const path of paths) {
const length = path.getTotalLength();
path.style.setProperty('--path-stroke-length', length);
}
.container {
max-width: 400px;
margin: 0 auto;
}
.signature {
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 55.30973%;
}
.signature svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.signature svg path {
stroke-dasharray: var(--path-stroke-length);
animation: draw 1.5s 1.5s ease-in-out both;
}
@keyframes draw {
from {
stroke-dashoffset: var(--path-stroke-length);
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="signature">
<svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
我基本上想将 JPEG 签名转换为 SVG。我只想使用以下代码并将其更改为输出 JPEG 中显示的签名。
为此，我使用了在线签名板，将其导出为 svg，然后从记事本中提取数据。但是，我面临一些问题。请看下面。
这是代码：
// Select all <path> elements.
const paths = document.querySelectorAll('path');
/**
* Loop over each path,
* calculate the length of a path,
* set a CSS variable with the length so CSS can read the length.
*/
for (const path of paths) {
const length = path.getTotalLength();
path.style.setProperty('--path-stroke-length', length);
}
.container {
max-width: 400px;
margin: 0 auto;
}
.signature {
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 55.30973%;
}
.signature svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.signature svg path {
stroke-dasharray: var(--path-stroke-length);
animation: draw 1.5s 1.5s ease-in-out both;
}
@keyframes draw {
from {
stroke-dashoffset: var(--path-stroke-length);
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="signature">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="34.924 351.353 548.489 159.86">
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/>
</svg>
</div>
</div>
我想要相同的动画，但签名如下：
这是我用在线记事本画签名，导出svg，用记事本提取svg元素后得到的svg。也就是说，这就是上面签名的svg：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 664 373" width="664" height="373"><path d="M 126.000,276.500 C 122.687,278.906 123.500,277.000 121.000,277.500" stroke-width="5.348" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 121.000,277.500 C 117.679,271.876 116.687,273.906 114.000,266.500" stroke-width="4.324" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 114.000,266.500 C 110.467,262.818 111.179,262.376 108.000,258.500" stroke-width="3.745" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 108.000,258.500 C 105.098,251.953 104.467,252.318 102.000,245.500" stroke-width="3.232" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 102.000,245.500 C 98.793,239.595 99.098,239.453 96.000,233.500" stroke-width="3.109" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 96.000,233.500 C 93.050,227.649 93.293,227.595 91.000,221.500" stroke-width="3.164" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 91.000,221.500 C 89.500,215.500 89.050,215.649 88.000,209.500" stroke-width="3.228" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 88.000,209.500 C 85.829,203.583 86.500,203.500 85.000,197.500" stroke-width="3.189" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,197.500 C 85.000,192.500 84.329,192.583 85.000,187.500" stroke-width="3.428" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,187.500 C 85.000,183.500 85.000,183.500 85.000,179.500" stroke-width="3.697" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,179.500 C 84.402,175.385 85.000,175.500 85.000,171.500" stroke-width="3.786" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 85.000,171.500 C 85.600,168.775 85.402,168.885 87.000,166.500" stroke-width="4.072" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 87.000,166.500 C 89.824,162.356 89.600,162.275 93.000,158.500" stroke-width="3.686" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 93.000,158.500 C 96.751,153.749 96.824,153.856 101.000,149.500" stroke-width="3.339" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 101.000,149.500 C 104.855,145.816 104.751,145.749 109.000,142.500" stroke-width="3.423" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 109.000,142.500 C 112.621,140.155 112.355,139.816 116.000,137.500" stroke-width="3.584" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 116.000,137.500 C 119.084,133.609 119.621,134.655 123.000,131.500" stroke-width="3.628" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 123.000,131.500 C 125.979,130.752 125.584,130.109 129.000,130.500" stroke-width="4.359" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 129.000,130.500 C 132.094,129.919 131.979,130.252 135.000,130.500" stroke-width="4.168" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 135.000,130.500 C 139.651,131.636 139.594,131.419 144.000,133.500" stroke-width="3.761" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 144.000,133.500 C 150.545,135.705 150.151,136.136 156.000,139.500" stroke-width="3.307" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 156.000,139.500 C 162.237,143.896 162.045,143.705 167.000,149.500" stroke-width="3.023" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 167.000,149.500 C 170.399,154.298 170.737,153.896 173.000,159.500" stroke-width="3.236" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 173.000,159.500 C 177.104,165.231 175.899,165.298 178.000,171.500" stroke-width="3.142" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 178.000,171.500 C 179.271,180.120 179.104,179.231 177.000,187.500" stroke-width="2.965" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 177.000,187.500 C 173.865,192.806 175.271,193.120 170.000,197.500" stroke-width="3.175" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 170.000,197.500 C 166.500,201.000 166.865,201.306 163.000,204.500" stroke-width="3.432" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 163.000,204.500 C 159.823,208.394 159.500,208.000 156.000,211.500" stroke-width="3.462" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 156.000,211.500 C 151.838,215.384 151.823,214.894 147.000,217.500" stroke-width="3.445" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 147.000,217.500 C 143.406,217.648 143.838,218.884 140.000,218.500" stroke-width="3.798" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 140.000,218.500 C 137.594,220.284 137.406,219.148 135.000,220.500" stroke-width="4.076" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 135.000,220.500 C 130.443,221.536 131.594,220.784 128.000,219.500" stroke-width="4.637" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 128.000,219.500 C 123.244,215.143 124.443,216.536 123.000,210.500" stroke-width="4.387" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 123.000,210.500 C 124.081,204.717 122.744,205.643 127.000,200.500" stroke-width="4.306" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 127.000,200.500 C 129.258,198.283 128.581,198.217 132.000,197.500" stroke-width="4.223" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 132.000,197.500 C 136.487,196.765 136.258,196.283 141.000,196.500" stroke-width="3.761" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 141.000,196.500 C 145.000,196.500 144.987,196.265 149.000,196.500" stroke-width="3.805" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 149.000,196.500 C 152.000,196.500 152.000,196.500 155.000,196.500" stroke-width="4.001" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 155.000,196.500 C 158.866,195.455 158.500,196.500 162.000,196.500" stroke-width="3.989" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 162.000,196.500 C 164.750,198.250 164.866,197.455 167.000,200.500" stroke-width="4.100" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 167.000,200.500 C 169.590,202.679 169.250,202.750 171.000,205.500" stroke-width="4.042" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 171.000,205.500 C 173.781,209.899 173.090,209.679 174.000,214.500" stroke-width="3.730" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 174.000,214.500 C 173.386,220.608 174.281,220.399 172.000,226.500" stroke-width="3.988" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 172.000,226.500 C 171.463,229.305 171.386,229.108 170.000,231.500" stroke-width="4.140" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 170.000,231.500 C 166.679,236.689 168.463,233.805 166.000,235.500" stroke-width="4.582" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 166.000,235.500 C 164.945,229.776 164.679,233.189 166.000,224.500" stroke-width="4.849" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 166.000,224.500 C 167.519,219.718 166.945,219.776 170.000,215.500" stroke-width="3.870" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 170.000,215.500 C 173.232,211.652 172.519,211.218 176.000,207.500" stroke-width="3.575" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 176.000,207.500 C 177.302,203.198 178.232,204.152 180.000,200.500" stroke-width="3.740" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 180.000,200.500 C 183.075,197.538 181.802,198.698 185.000,198.500" stroke-width="4.586" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 185.000,198.500 C 188.098,201.696 188.075,200.038 190.000,205.500" stroke-width="4.498" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 190.000,205.500 C 191.919,209.905 192.098,209.696 193.000,214.500" stroke-width="3.838" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 193.000,214.500 C 193.749,218.484 193.919,218.405 194.000,222.500" stroke-width="3.822" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,222.500 C 194.000,226.500 194.249,226.484 194.000,230.500" stroke-width="3.771" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,230.500 C 195.606,234.493 194.000,233.500 194.000,236.500" stroke-width="4.034" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,236.500 C 189.847,240.953 191.606,239.493 186.000,240.500" stroke-width="4.642" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 186.000,240.500 C 181.135,237.946 181.347,239.953 177.000,234.500" stroke-width="3.728" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 177.000,234.500 C 172.774,229.677 172.135,230.446 168.000,225.500" stroke-width="3.290" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 168.000,225.500 C 161.272,222.948 164.774,222.677 161.000,220.500" stroke-width="3.589" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 161.000,220.500 C 163.651,216.872 160.772,218.448 167.000,216.500" stroke-width="4.667" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 167.000,216.500 C 173.010,217.443 172.651,215.872 179.000,218.500" stroke-width="3.600" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 179.000,218.500 C 181.492,219.044 181.510,218.943 184.000,219.500" stroke-width="4.080" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 184.000,219.500 C 187.712,218.899 186.992,220.044 190.000,220.500" stroke-width="4.924" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 190.000,220.500 C 191.403,224.139 192.712,222.399 194.000,226.500" stroke-width="4.918" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 194.000,226.500 C 197.322,228.924 196.903,229.139 201.000,230.500" stroke-width="4.652" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 201.000,230.500 C 204.431,231.990 204.322,231.924 208.000,232.500" stroke-width="4.639" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 208.000,232.500 C 212.934,234.337 211.431,232.990 215.000,232.500" stroke-width="4.842" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 215.000,232.500 C 217.593,228.059 217.434,230.337 217.000,224.500" stroke-width="4.957" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 217.000,224.500 C 214.315,222.867 216.593,222.059 213.000,220.500" stroke-width="4.862" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 213.000,220.500 C 210.553,216.404 211.815,218.367 212.000,215.500" stroke-width="5.126" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 212.000,215.500 C 216.500,215.500 214.553,213.904 221.000,215.500" stroke-width="4.610" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 221.000,215.500 C 226.672,213.877 226.000,215.500 231.000,215.500" stroke-width="4.422" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 231.000,215.500 C 235.438,221.188 234.672,216.877 237.000,221.500" stroke-width="4.459" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 237.000,221.500 C 236.933,218.833 237.938,221.688 236.000,216.500" stroke-width="5.093" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 236.000,216.500 C 234.777,213.784 234.933,213.833 233.000,211.500" stroke-width="4.424" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 233.000,211.500 C 231.367,208.815 231.277,209.284 229.000,207.500" stroke-width="4.280" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 229.000,207.500 C 225.368,205.360 226.867,206.315 224.000,206.500" stroke-width="4.837" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 224.000,206.500 C 223.232,209.478 222.368,207.860 223.000,212.500" stroke-width="4.953" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 223.000,212.500 C 221.489,216.695 222.732,215.978 223.000,219.500" stroke-width="4.747" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 223.000,219.500 C 226.107,223.164 224.989,223.195 230.000,225.500" stroke-width="4.738" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 230.000,225.500 C 233.929,227.247 233.607,227.664 238.000,228.500" stroke-width="4.525" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 238.000,228.500 C 243.000,228.770 240.429,229.247 243.000,229.500" stroke-width="4.927" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 243.000,229.500 C 240.601,231.027 243.000,230.270 238.000,231.500" stroke-width="5.190" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 238.000,231.500 C 235.000,231.500 235.101,232.027 232.000,231.500" stroke-width="4.421" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 232.000,231.500 C 227.500,231.500 227.500,231.500 223.000,231.500" stroke-width="3.812" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 223.000,231.500 C 216.774,231.952 220.000,231.500 217.000,231.500" stroke-width="4.003" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 217.000,231.500 C 220.427,229.976 217.274,230.952 224.000,229.500" stroke-width="4.805" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 224.000,229.500 C 228.000,229.500 227.927,228.976 232.000,229.500" stroke-width="4.074" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 232.000,229.500 C 235.000,229.500 235.000,229.500 238.000,229.500" stroke-width="4.086" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 238.000,229.500 C 243.359,231.017 242.500,229.500 247.000,229.500" stroke-width="4.333" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 247.000,229.500 C 249.368,227.240 249.359,228.517 250.000,224.500" stroke-width="5.007" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 250.000,224.500 C 248.611,219.833 250.868,220.740 250.000,216.500" stroke-width="4.661" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 250.000,216.500 C 252.149,212.690 251.111,213.833 255.000,212.500" stroke-width="4.978" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 255.000,212.500 C 260.340,213.307 259.649,212.190 265.000,215.500" stroke-width="4.463" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 265.000,215.500 C 271.372,219.244 268.840,217.307 272.000,220.500" stroke-width="4.693" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 272.000,220.500 C 269.172,220.685 272.372,221.244 267.000,219.500" stroke-width="5.161" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 267.000,219.500 C 264.022,216.973 263.672,217.685 261.000,214.500" stroke-width="4.171" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 261.000,214.500 C 258.094,210.238 258.522,212.473 256.000,210.500" stroke-width="4.535" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 256.000,210.500 C 252.746,213.216 254.094,210.738 253.000,215.500" stroke-width="5.022" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 253.000,215.500 C 254.610,218.106 253.246,217.716 257.000,219.500" stroke-width="4.866" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 257.000,219.500 C 260.950,221.150 260.610,221.606 265.000,222.500" stroke-width="4.822" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 265.000,222.500 C 268.500,223.500 268.450,223.650 272.000,224.500" stroke-width="4.883" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 272.000,224.500 C 279.234,225.562 275.500,225.500 279.000,226.500" stroke-width="4.669" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 279.000,226.500 C 275.064,228.022 278.734,227.562 271.000,228.500" stroke-width="5.018" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 271.000,228.500 C 262.900,228.500 266.564,229.022 262.000,228.500" stroke-width="3.933" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 262.000,228.500 C 265.000,228.500 261.400,228.500 268.000,228.500" stroke-width="4.865" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 268.000,228.500 C 271.727,229.318 271.500,228.500 275.000,228.500" stroke-width="4.739" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 275.000,228.500 C 277.332,226.612 277.727,227.818 280.000,225.500" stroke-width="5.175" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 280.000,225.500 C 283.471,224.382 283.332,224.112 287.000,223.500" stroke-width="4.977" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 287.000,223.500 C 289.473,222.730 289.471,222.882 292.000,222.500" stroke-width="4.917" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 292.000,222.500 C 295.021,222.252 294.973,222.230 298.000,222.500" stroke-width="4.308" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 298.000,222.500 C 301.702,221.968 301.021,222.752 304.000,223.500" stroke-width="4.636" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 304.000,223.500 C 307.734,227.032 306.202,224.968 307.000,228.500" stroke-width="5.000" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 307.000,228.500 C 304.024,229.284 306.234,230.032 301.000,229.500" stroke-width="5.011" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 301.000,229.500 C 296.984,229.749 297.024,229.784 293.000,229.500" stroke-width="4.682" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 293.000,229.500 C 287.802,230.461 288.984,229.249 285.000,228.500" stroke-width="4.568" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 285.000,228.500 C 282.029,224.684 282.802,226.961 283.000,222.500" stroke-width="4.673" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 283.000,222.500 C 285.791,219.669 284.029,220.184 289.000,219.500" stroke-width="4.982" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 289.000,219.500 C 295.764,219.768 295.291,219.169 302.000,221.500" stroke-width="4.269" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 302.000,221.500 C 304.397,223.198 304.764,222.268 307.000,224.500" stroke-width="4.165" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 307.000,224.500 C 311.670,226.191 311.397,226.698 316.000,228.500" stroke-width="3.724" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 316.000,228.500 C 319.198,230.258 319.170,230.191 322.000,232.500" stroke-width="4.336" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 322.000,232.500 C 324.277,236.746 324.198,234.258 326.000,236.500" stroke-width="4.652" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 326.000,236.500 C 328.261,234.211 327.777,236.246 329.000,231.500" stroke-width="5.154" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 329.000,231.500 C 327.791,225.984 329.761,228.711 329.000,225.500" stroke-width="5.304" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 329.000,225.500 C 331.611,227.376 330.291,224.984 334.000,229.500" stroke-width="5.179" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 334.000,229.500 C 336.399,233.957 336.111,231.376 338.000,233.500" stroke-width="5.283" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 338.000,233.500 C 338.658,228.202 339.899,232.957 341.000,227.500" stroke-width="5.316" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 341.000,227.500 C 344.844,228.492 343.658,226.702 348.000,230.500" stroke-width="4.994" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 348.000,230.500 C 349.784,234.254 350.344,231.992 352.000,234.500" stroke-width="4.426" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 352.000,234.500 C 354.541,231.276 354.284,234.754 357.000,231.500" stroke-width="5.112" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 357.000,231.500 C 360.198,233.258 360.041,231.776 363.000,235.500" stroke-width="4.773" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 363.000,235.500 C 368.353,238.598 365.198,237.258 367.000,239.500" stroke-width="5.214" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 367.000,239.500 C 360.536,240.977 363.853,241.598 354.000,241.500" stroke-width="4.643" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 354.000,241.500 C 347.941,240.863 348.036,241.977 342.000,241.500" stroke-width="3.611" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 342.000,241.500 C 334.067,243.551 333.941,242.363 326.000,244.500" stroke-width="3.061" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 218.000,263.500 C 223.981,260.952 224.000,261.000 230.000,258.500" stroke-width="4.994" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 230.000,258.500 C 237.328,254.988 237.481,255.452 245.000,252.500" stroke-width="3.303" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 245.000,252.500 C 256.172,250.031 255.828,248.988 267.000,246.500" stroke-width="2.616" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 267.000,246.500 C 278.940,241.829 279.172,242.531 291.000,237.500" stroke-width="2.281" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 291.000,237.500 C 298.591,235.244 298.440,234.829 306.000,232.500" stroke-width="2.690" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 306.000,232.500 C 311.895,229.655 312.091,230.244 318.000,227.500" stroke-width="3.020" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 241.000,266.500 C 244.728,267.641 244.500,266.500 248.000,266.500" stroke-width="5.157" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 248.000,266.500 C 265.982,258.956 266.228,260.141 284.000,251.500" stroke-width="2.058" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 284.000,251.500 C 295.229,247.491 294.982,246.956 306.000,242.500" stroke-width="2.197" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 306.000,242.500 C 315.401,237.299 315.729,237.991 325.000,232.500" stroke-width="2.391" stroke="black" fill="none" stroke-linecap="round"></path><path d="M 325.000,232.500 C 331.460,229.407 331.401,229.299 338.000,226.500" stroke-width="2.819" stroke="black" fill="none" stroke-linecap="round"></path></svg>
问题是，如果我只将 <path> 粘贴到上面的代码中，代码将不会执行。我该如何解决？
如果将 SVG 粘贴到 div 中，则动画有效。它看起来与其他动画不一样的原因是您的签名被分解成很多小路径。
我建议您使用 Figma 通过钢笔工具创建您的签名。您将能够创建您实际想要设置动画的路径，并将导出更小的 svg.
已更新
您应该可以使用此 SVG 并对其进行一些修改，但这是基本思想。
// Select all <path> elements.
const paths = document.querySelectorAll('path');
/**
* Loop over each path,
* calculate the length of a path,
* set a CSS variable with the length so CSS can read the length.
*/
for (const path of paths) {
const length = path.getTotalLength();
path.style.setProperty('--path-stroke-length', length);
}
.container {
max-width: 400px;
margin: 0 auto;
}
.signature {
position: relative;
overflow: auto;
width: 100%;
height: 0;
padding-bottom: 55.30973%;
}
.signature svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.signature svg path {
stroke-dasharray: var(--path-stroke-length);
animation: draw 1.5s 1.5s ease-in-out both;
}
@keyframes draw {
from {
stroke-dashoffset: var(--path-stroke-length);
}
to {
stroke-dashoffset: 0;
}
}
<div class="container">
<div class="signature">
<svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>