模仿svg描边动画时,相同的代码但是无法运行,报错没有这个函数
出现报错Uncaught TypeError: logo[i].gettoalllenth is not a function
望采纳!!新年快乐🎉🎉
请使用下面这种的方式调用:
logo[i].node().getTotalLength()
**问题是console.log(第 ${i}个字的长度为: ${logo[i].getTotallLength()}
);这一步中的gettoalllength没有这个函数,但是演示视频里是可以的
**
编辑问题发布有问题,就附在下面了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
<!-- 初始化 -->
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100%;
background-color:rgb(227, 228, 232);
}
#logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#logo path:nth-child(1){
stroke-dasharray: 200px;
stroke-dashoffset: 50px;
}
#logo path:nth-child(2){
stroke-dasharray: 30px;
}
#logo path:nth-child(3){
stroke-dasharray: 30px;
}
#logo path:nth-child(4){
stroke-dasharray: 30px;
}
#logo path:nth-child(5){
stroke-dasharray: 30px;
}
#logo path:nth-child(6){
stroke-dasharray: 30px;
}
#logo path:nth-child(7){
stroke-dasharray: 30px;
}
#logo path:nth-child(8){
stroke-dasharray: 30px;
}
#logo path:nth-child(9){
stroke-dasharray: 30px;
}
#logo path:nth-child(10){
stroke-dasharray: 300px;
}
#logo path:nth-child(11){
stroke-dasharray: 300px;
}
</style>
</head>
<body>
<!-- 导入svg路径 -->
<svg id="logo" width="734" height="151" viewBox="0 0 734 151" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.904 119.32H3.44L19.856 2.96799H40.448C50.336 2.96799 57.824 5.41599 62.912 10.312C68.096 15.112 71.36 21.976 72.704 30.904C74.144 39.832 74.048 50.344 72.416 62.44C70.976 74.056 68.432 84.136 64.784 92.68C61.136 101.128 56.144 107.704 49.808 112.408C43.472 117.016 35.504 119.32 25.904 119.32ZM38.864 16.216L32.816 16.072L20.144 106.072H27.632C35.888 106.072 42.32 102.376 46.928 94.984C51.632 87.496 54.944 76.792 56.864 62.872C59.168 46.84 58.832 35.08 55.856 27.592C52.88 20.104 47.216 16.312 38.864 16.216Z" stroke="#2459E1" stroke-width="5"/>
<path d="M90.3688 119.32H76.6888L89.0728 31.048H102.753L101.169 42.136C103.953 37.912 107.265 34.888 111.105 33.064C114.945 31.24 118.977 30.328 123.201 30.328L121.329 44.584C116.049 43.912 111.249 45.256 106.929 48.616C102.609 51.88 99.6808 57.112 98.1448 64.312L90.3688 119.32Z" stroke="#2459E1" stroke-width="5"/>
<path d="M169.96 95.56C167.656 103.528 163.96 109.72 158.872 114.136C153.784 118.552 147.784 120.76 140.872 120.76C133.576 120.76 128.2 118.792 124.744 114.856C121.288 110.824 119.224 105.352 118.552 98.44C117.976 91.528 118.216 83.656 119.272 74.824C120.424 65.992 122.248 58.216 124.744 51.496C127.336 44.776 130.888 39.544 135.4 35.8C139.912 31.96 145.528 30.04 152.248 30.04C159.256 30.04 164.488 32.008 167.944 35.944C171.4 39.784 173.416 45.352 173.992 52.648C174.664 59.944 174.28 68.728 172.84 79H132.52C131.944 83.992 131.704 88.696 131.8 93.112C131.896 97.432 132.712 100.984 134.248 103.768C135.784 106.456 138.424 107.8 142.168 107.8C149.08 107.8 154.072 103.096 157.144 93.688L169.96 95.56ZM151.096 43C146.968 43 143.56 45.064 140.872 49.192C138.184 53.32 136.024 59.32 134.392 67.192H159.88C160.264 62.584 160.312 58.456 160.024 54.808C159.736 51.16 158.872 48.28 157.432 46.168C156.088 44.056 153.976 43 151.096 43Z" stroke="#2459E1" stroke-width="5"/>
<path d="M228.777 119.32H215.529L216.249 111.4C214.137 114.28 211.738 116.536 209.049 118.168C206.457 119.896 203.722 120.76 200.842 120.76C196.234 120.76 192.249 119.224 188.889 116.152C185.625 113.08 183.37 108.088 182.122 101.176C180.874 94.168 181.065 84.856 182.697 73.24C184.713 58.648 188.361 47.848 193.641 40.84C199.017 33.736 205.209 30.184 212.217 30.184C218.649 30.184 223.306 33.112 226.186 38.968L227.193 31.48H241.161L228.777 119.32ZM196.954 74.824C196.186 80.968 195.754 86.536 195.658 91.528C195.658 96.52 196.33 100.504 197.674 103.48C199.018 106.36 201.321 107.8 204.585 107.8C206.889 107.8 208.953 106.984 210.777 105.352C212.697 103.624 214.33 101.416 215.674 98.728C217.018 96.04 218.074 93.208 218.842 90.232L223.45 58.12C223.546 53.704 222.681 50.104 220.857 47.32C219.129 44.536 216.682 43.144 213.514 43.144C210.538 43.144 207.946 44.584 205.738 47.464C203.53 50.344 201.706 54.184 200.266 58.984C198.826 63.784 197.722 69.064 196.954 74.824Z" stroke="#2459E1" stroke-width="5"/>
<path d="M257.157 119.32H243.189L255.717 31.48H268.821L268.101 39.976C270.501 36.424 273.141 33.88 276.021 32.344C278.997 30.808 281.877 30.04 284.661 30.04C288.501 30.04 291.861 31.048 294.741 33.064C297.717 35.08 299.637 38.488 300.501 43.288C302.997 38.488 305.877 35.08 309.141 33.064C312.501 31.048 315.813 30.04 319.077 30.04C322.533 30.04 325.605 30.904 328.293 32.632C331.077 34.264 333.093 36.952 334.341 40.696C335.685 44.44 335.877 49.528 334.917 55.96L325.989 119.32H311.877L320.661 58.264C322.101 48.088 319.653 43 313.317 43C310.149 43 307.413 44.488 305.109 47.464C302.805 50.44 301.125 54.28 300.069 58.984L291.573 119.32H277.461L286.245 58.264C287.685 48.088 285.237 43 278.901 43C275.829 43 273.141 44.44 270.837 47.32C268.533 50.2 266.853 53.896 265.797 58.408L257.157 119.32Z" stroke="#2459E1" stroke-width="5"/>
<path d="M395.945 95.56C393.641 103.528 389.945 109.72 384.857 114.136C379.769 118.552 373.769 120.76 366.857 120.76C359.561 120.76 354.185 118.792 350.729 114.856C347.273 110.824 345.209 105.352 344.537 98.44C343.961 91.528 344.201 83.656 345.257 74.824C346.409 65.992 348.233 58.216 350.729 51.496C353.321 44.776 356.873 39.544 361.385 35.8C365.897 31.96 371.513 30.04 378.233 30.04C385.241 30.04 390.473 32.008 393.929 35.944C397.385 39.784 399.401 45.352 399.977 52.648C400.649 59.944 400.265 68.728 398.825 79H358.505C357.929 83.992 357.689 88.696 357.785 93.112C357.881 97.432 358.697 100.984 360.233 103.768C361.769 106.456 364.409 107.8 368.153 107.8C375.065 107.8 380.057 103.096 383.129 93.688L395.945 95.56ZM377.081 43C372.953 43 369.545 45.064 366.857 49.192C364.169 53.32 362.009 59.32 360.377 67.192H385.865C386.249 62.584 386.297 58.456 386.009 54.808C385.721 51.16 384.857 48.28 383.417 46.168C382.073 44.056 379.961 43 377.081 43Z" stroke="#2459E1" stroke-width="5"/>
<path d="M418.728 119.32H405.048L417.432 31.048H431.112L429.528 42.136C432.312 37.912 435.624 34.888 439.464 33.064C443.304 31.24 447.336 30.328 451.56 30.328L449.688 44.584C444.408 43.912 439.608 45.256 435.288 48.616C430.968 51.88 428.04 57.112 426.504 64.312L418.728 119.32Z" stroke="#2459E1" stroke-width="5"/>
<path d="M447.815 138.328H534.215L532.775 148.12H446.375L447.815 138.328Z" stroke="#2459E1" stroke-width="5"/>
<path d="M548.703 119.32H534.303L550.575 2.96799H564.975L558.207 51.352H587.295L594.063 2.96799H608.463L592.191 119.32H577.791L585.423 65.032H556.335L548.703 119.32Z" stroke="#2459E1" stroke-width="5"/>
<path d="M656.981 119.32H643.733L644.453 111.4C642.341 114.28 639.941 116.536 637.253 118.168C634.661 119.896 631.925 120.76 629.045 120.76C624.437 120.76 620.453 119.224 617.093 116.152C613.829 113.08 611.573 108.088 610.325 101.176C609.077 94.168 609.269 84.856 610.901 73.24C612.917 58.648 616.565 47.848 621.845 40.84C627.221 33.736 633.413 30.184 640.421 30.184C646.853 30.184 651.509 33.112 654.389 38.968L655.397 31.48H669.365L656.981 119.32ZM625.157 74.824C624.389 80.968 623.957 86.536 623.861 91.528C623.861 96.52 624.533 100.504 625.877 103.48C627.221 106.36 629.525 107.8 632.789 107.8C635.093 107.8 637.157 106.984 638.981 105.352C640.901 103.624 642.533 101.416 643.877 98.728C645.221 96.04 646.277 93.208 647.045 90.232L651.653 58.12C651.749 53.704 650.885 50.104 649.061 47.32C647.333 44.536 644.885 43.144 641.717 43.144C638.741 43.144 636.149 44.584 633.941 47.464C631.733 50.344 629.909 54.184 628.469 58.984C627.029 63.784 625.925 69.064 625.157 74.824Z" stroke="#2459E1" stroke-width="5"/>
<path d="M697.456 120.76C688.144 120.76 681.76 117.112 678.304 109.816C674.848 102.424 674.128 91 676.144 75.544C678.16 59.896 681.808 48.424 687.088 41.128C692.464 33.736 699.712 30.04 708.832 30.04C718.24 30.04 724.672 33.736 728.128 41.128C731.584 48.424 732.304 59.896 730.288 75.544C728.272 91 724.576 102.424 719.2 109.816C713.92 117.112 706.672 120.76 697.456 120.76ZM698.464 107.8C702.88 107.8 706.48 105.208 709.264 100.024C712.144 94.744 714.352 86.584 715.888 75.544C717.52 64.408 717.664 56.2 716.32 50.92C714.976 45.64 712.096 43 707.68 43C703.456 43 699.952 45.64 697.168 50.92C694.384 56.2 692.176 64.408 690.544 75.544C689.008 86.584 688.864 94.744 690.112 100.024C691.36 105.208 694.144 107.8 698.464 107.8Z" stroke="#2459E1" stroke-width="5"/>
</svg>
<!-- 求每个字符总长度 -->
<script>
const logo =document.querySelectorAll("#logo path");
for(let i=0;i<logo.length;i++)
{
console.log(`Letter ${i} is ${logo[i].getTotallLength()}`);
}
</script>
</body>
</html>