我基本上想將 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>到上面的代碼中，代碼就不會執行。我該如何解決？
uj5u.com熱心網友回復：
如果將 粘貼到SVGdiv 中，影片將起作用。它看起來與其他影片不同的原因是您的簽名被分解成很多小路徑。
我建議您使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/403794.html
標籤：