Why i got blank points on my SVG after animation?
Question
I have little problem with my SVG. When animation is finished then there are blank points on svg text. I put here my code pen with whole code and you can see this on your own. I have to addmit that problem exist only on chrome, opera and edge browsers. Firefox is fine. I checked "can i use" site and i see that my code is fine. Can you explain me why there are thouse blank points after animation?
const logo = document.querySelectorAll('#logo path'); for (i = 8; i < logo.length; i++) { console.log(`outline: ${logo[i].getTotalLength()}`); console.log(`mask: ${logo[i-8].getTotalLength()}`); } // funkcja dodająca odpowiednie komendy do każdej ścieżki const svgText = () => { const pathLengths = ['580', '470', '505', '235', '645', '614', '473', '558']; const delayArray = ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']; const delayArray2 = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000]; for (i = 8; i < logo.length; i++) { logo[i].style.strokeDasharray = pathLengths[i - 8] + 'px'; logo[i].style.strokeDashoffset = pathLengths[i - 8] + 'px'; logo[i].style.animationFillMode = 'forwards'; debugger; logo[i].animate([{ strokeDashoffset: '0' }], { duration: 3500, delay: delayArray2[i - 8], fill: 'forwards' }) logo[i - 8].animate([{ fill: 'white' }], { duration: 2000, delay: 5000, fill: 'forwards' }) } } svgText();
body, html { padding: 0px; margin: 0px; width: 100%; height: 100%; } .container { background-color: black; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .as-console-wrapper { max-height: 50px !important; }
<html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://kit.fontawesome.com/6c45422137.js" crossorigin="anonymous"></script> <title>SVGG</title> </head> <body> <div class="container"> <div class="svg"> <svg id="logo" width="400" height="118" viewBox="0 0 672 118" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.908325" y="0.335995" width="671" height="117" fill="black"> <rect fill="white" x="0.908325" y="0.335995" width="671" height="117"/> <path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7.90833V8.632H39.1563ZM39.1563 98.2C52.1163 98.2 62.0043 94.792 68.8203 87.976C75.6363 81.064 79.0443 71.416 79.0443 59.032C79.0443 46.552 75.5883 36.808 68.6763 29.8C61.8603 22.792 52.0203 19.288 39.1563 19.288H21.0123V98.2H39.1563Z"/> <path d="M122.825 19.288V52.84H159.401V63.64H122.825V98.2H163.721V109H109.721V8.488H163.721V19.288H122.825Z"/> <path d="M215.373 110.008C208.749 110.008 202.797 108.856 197.517 106.552C192.333 104.152 188.253 100.888 185.277 96.76C182.301 92.536 180.765 87.688 180.669 82.216H194.637C195.117 86.92 197.037 90.904 200.397 94.168C203.853 97.336 208.845 98.92 215.373 98.92C221.613 98.92 226.509 97.384 230.061 94.312C233.709 91.144 235.533 87.112 235.533 82.216C235.533 78.376 234.477 75.256 232.365 72.856C230.253 70.456 227.613 68.632 224.445 67.384C221.277 66.136 217.005 64.792 211.629 63.352C205.005 61.624 199.677 59.896 195.645 58.168C191.709 56.44 188.301 53.752 185.421 50.104C182.637 46.36 181.245 41.368 181.245 35.128C181.245 29.656 182.637 24.808 185.421 20.584C188.205 16.36 192.093 13.096 197.085 10.792C202.173 8.48799 207.981 7.33599 214.509 7.33599C223.917 7.33599 231.597 9.688 237.549 14.392C243.597 19.096 247.005 25.336 247.773 33.112H233.373C232.893 29.272 230.877 25.912 227.325 23.032C223.773 20.056 219.069 18.568 213.213 18.568C207.741 18.568 203.277 20.008 199.821 22.888C196.365 25.672 194.637 29.608 194.637 34.696C194.637 38.344 195.645 41.32 197.661 43.624C199.773 45.928 202.317 47.704 205.293 48.952C208.365 50.104 212.637 51.448 218.109 52.984C224.733 54.808 230.061 56.632 234.093 58.456C238.125 60.184 241.581 62.92 244.461 66.664C247.341 70.312 248.781 75.304 248.781 81.64C248.781 86.536 247.485 91.144 244.893 95.464C242.301 99.784 238.461 103.288 233.373 105.976C228.285 108.664 222.285 110.008 215.373 110.008Z"/> <path d="M281.169 8.632V109H268.065V8.632H281.169Z"/> <path d="M379.534 37.72C376.75 31.864 372.718 27.352 367.438 24.184C362.158 20.92 356.014 19.288 349.006 19.288C341.998 19.288 335.662 20.92 329.998 24.184C324.43 27.352 320.014 31.96 316.75 38.008C313.582 43.96 311.998 50.872 311.998 58.744C311.998 66.616 313.582 73.528 316.75 79.48C320.014 85.432 324.43 90.04 329.998 93.304C335.662 96.472 341.998 98.056 349.006 98.056C358.798 98.056 366.862 95.128 373.198 89.272C379.534 83.416 383.23 75.496 384.286 65.512H344.254V54.856H398.254V64.936C397.486 73.192 394.894 80.776 390.478 87.688C386.062 94.504 380.254 99.928 373.054 103.96C365.854 107.896 357.838 109.864 349.006 109.864C339.694 109.864 331.198 107.704 323.518 103.384C315.838 98.968 309.742 92.872 305.23 85.096C300.814 77.32 298.606 68.536 298.606 58.744C298.606 48.952 300.814 40.168 305.23 32.392C309.742 24.52 315.838 18.424 323.518 14.104C331.198 9.688 339.694 7.48 349.006 7.48C359.662 7.48 369.07 10.12 377.23 15.4C385.486 20.68 391.486 28.12 395.23 37.72H379.534Z"/> <path d="M494.492 109H481.388L428.684 29.08V109H415.58V8.488H428.684L481.388 88.264V8.488H494.492V109Z"/> <path d="M529.934 19.288V52.84H566.51V63.64H529.934V98.2H570.83V109H516.83V8.488H570.83V19.288H529.934Z"/> <path d="M643.506 109L619.602 67.96H603.762V109H590.658V8.632H623.058C630.642 8.632 637.026 9.928 642.21 12.52C647.49 15.112 651.426 18.616 654.018 23.032C656.61 27.448 657.906 32.488 657.906 38.152C657.906 45.064 655.89 51.16 651.858 56.44C647.922 61.72 641.97 65.224 634.002 66.952L659.202 109H643.506ZM603.762 57.448H623.058C630.162 57.448 635.49 55.72 639.042 52.264C642.594 48.712 644.37 44.008 644.37 38.152C644.37 32.2 642.594 27.592 639.042 24.328C635.586 21.064 630.258 19.432 623.058 19.432H603.762V57.448Z"/> </mask> <path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7.90833V8.632H39.1563ZM39.1563 98.2C52.1163 98.2 62.0043 94.792 68.8203 87.976C75.6363 81.064 79.0443 71.416 79.0443 59.032C79.0443 46.552 75.5883 36.808 68.6763 29.8C61.8603 22.792 52.0203 19.288 39.1563 19.288H21.0123V98.2H39.1563Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M122.825 19.288V52.84H159.401V63.64H122.825V98.2H163.721V109H109.721V8.488H163.721V19.288H122.825Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M215.373 110.008C208.749 110.008 202.797 108.856 197.517 106.552C192.333 104.152 188.253 100.888 185.277 96.76C182.301 92.536 180.765 87.688 180.669 82.216H194.637C195.117 86.92 197.037 90.904 200.397 94.168C203.853 97.336 208.845 98.92 215.373 98.92C221.613 98.92 226.509 97.384 230.061 94.312C233.709 91.144 235.533 87.112 235.533 82.216C235.533 78.376 234.477 75.256 232.365 72.856C230.253 70.456 227.613 68.632 224.445 67.384C221.277 66.136 217.005 64.792 211.629 63.352C205.005 61.624 199.677 59.896 195.645 58.168C191.709 56.44 188.301 53.752 185.421 50.104C182.637 46.36 181.245 41.368 181.245 35.128C181.245 29.656 182.637 24.808 185.421 20.584C188.205 16.36 192.093 13.096 197.085 10.792C202.173 8.48799 207.981 7.33599 214.509 7.33599C223.917 7.33599 231.597 9.688 237.549 14.392C243.597 19.096 247.005 25.336 247.773 33.112H233.373C232.893 29.272 230.877 25.912 227.325 23.032C223.773 20.056 219.069 18.568 213.213 18.568C207.741 18.568 203.277 20.008 199.821 22.888C196.365 25.672 194.637 29.608 194.637 34.696C194.637 38.344 195.645 41.32 197.661 43.624C199.773 45.928 202.317 47.704 205.293 48.952C208.365 50.104 212.637 51.448 218.109 52.984C224.733 54.808 230.061 56.632 234.093 58.456C238.125 60.184 241.581 62.92 244.461 66.664C247.341 70.312 248.781 75.304 248.781 81.64C248.781 86.536 247.485 91.144 244.893 95.464C242.301 99.784 238.461 103.288 233.373 105.976C228.285 108.664 222.285 110.008 215.373 110.008Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M281.169 8.632V109H268.065V8.632H281.169Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M379.534 37.72C376.75 31.864 372.718 27.352 367.438 24.184C362.158 20.92 356.014 19.288 349.006 19.288C341.998 19.288 335.662 20.92 329.998 24.184C324.43 27.352 320.014 31.96 316.75 38.008C313.582 43.96 311.998 50.872 311.998 58.744C311.998 66.616 313.582 73.528 316.75 79.48C320.014 85.432 324.43 90.04 329.998 93.304C335.662 96.472 341.998 98.056 349.006 98.056C358.798 98.056 366.862 95.128 373.198 89.272C379.534 83.416 383.23 75.496 384.286 65.512H344.254V54.856H398.254V64.936C397.486 73.192 394.894 80.776 390.478 87.688C386.062 94.504 380.254 99.928 373.054 103.96C365.854 107.896 357.838 109.864 349.006 109.864C339.694 109.864 331.198 107.704 323.518 103.384C315.838 98.968 309.742 92.872 305.23 85.096C300.814 77.32 298.606 68.536 298.606 58.744C298.606 48.952 300.814 40.168 305.23 32.392C309.742 24.52 315.838 18.424 323.518 14.104C331.198 9.688 339.694 7.48 349.006 7.48C359.662 7.48 369.07 10.12 377.23 15.4C385.486 20.68 391.486 28.12 395.23 37.72H379.534Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M494.492 109H481.388L428.684 29.08V109H415.58V8.488H428.684L481.388 88.264V8.488H494.492V109Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M529.934 19.288V52.84H566.51V63.64H529.934V98.2H570.83V109H516.83V8.488H570.83V19.288H529.934Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M643.506 109L619.602 67.96H603.762V109H590.658V8.632H623.058C630.642 8.632 637.026 9.928 642.21 12.52C647.49 15.112 651.426 18.616 654.018 23.032C656.61 27.448 657.906 32.488 657.906 38.152C657.906 45.064 655.89 51.16 651.858 56.44C647.922 61.72 641.97 65.224 634.002 66.952L659.202 109H643.506ZM603.762 57.448H623.058C630.162 57.448 635.49 55.72 639.042 52.264C642.594 48.712 644.37 44.008 644.37 38.152C644.37 32.2 642.594 27.592 639.042 24.328C635.586 21.064 630.258 19.432 623.058 19.432H603.762V57.448Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> </svg> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
2 answers
solution1
0 2020-09-23 22:54:47
Please find here some corrections. It still needs a small work for the N but no more black holes:
const logo = document.querySelectorAll('#logo path'); for (i = 8; i < logo.length; i++) { console.log(`outline: ${logo[i].getTotalLength()}`); console.log(`mask: ${logo[i-8].getTotalLength()}`); } // funkcja dodająca odpowiednie komendy do każdej ścieżki const svgText = () => { const pathLengths = ['580', '470', '505', '235', '645', '614', '473', '558']; const delayArray = ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']; const delayArray2 = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000]; for (i = 8; i < logo.length; i++) { logo[i].style.strokeDasharray = pathLengths[i - 8] + 'px'; logo[i].style.strokeDashoffset = pathLengths[i - 8] + 'px'; logo[i].style.animationFillMode = 'forwards'; debugger; logo[i].animate([{ strokeDashoffset: '0' }], { duration: 3500, delay: delayArray2[i - 8], fill: 'forwards' }) logo[i - 8].animate([{ fill: 'white' }], { duration: 2000, delay: 5000, fill: 'forwards' }) } } svgText();
body, html { padding: 0px; margin: 0px; width: 100%; height: 100%; } .container { background-color: black; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .as-console-wrapper { max-height: 50px !important; }
<html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://kit.fontawesome.com/6c45422137.js" crossorigin="anonymous"></script> <title>SVGG</title> </head> <body> <div class="container"> <div class="svg"> <svg id="logo" width="400" height="118" viewBox="0 0 672 118" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.908325" y="0.335995" width="671" height="117" fill="black"> <rect fill="white" x="0.908325" y="0.335995" width="671" height="117"/> <path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7.90833V8.632H39.1563ZM39.1563 98.2C52.1163 98.2 62.0043 94.792 68.8203 87.976C75.6363 81.064 79.0443 71.416 79.0443 59.032C79.0443 46.552 75.5883 36.808 68.6763 29.8C61.8603 22.792 52.0203 19.288 39.1563 19.288H21.0123V98.2H39.1563Z"/> <path d="M122.825 22.288V52.84H159.401V63.64H122.825V98.2H163.721V109H109.721V8.488H163.721V19.288H122.825Z"/> <path d="M215.373 110.008C208.749 110.008 202.797 108.856 197.517 106.552C192.333 104.152 188.253 100.888 185.277 96.76C182.301 92.536 180.765 87.688 180.669 82.216H194.637C195.117 86.92 197.037 90.904 200.397 94.168C203.853 97.336 208.845 98.92 215.373 98.92C221.613 98.92 226.509 97.384 230.061 94.312C233.709 91.144 235.533 87.112 235.533 82.216C235.533 78.376 234.477 75.256 232.365 72.856C230.253 70.456 227.613 68.632 224.445 67.384C221.277 66.136 217.005 64.792 211.629 63.352C205.005 61.624 199.677 59.896 195.645 58.168C191.709 56.44 188.301 53.752 185.421 50.104C182.637 46.36 181.245 41.368 181.245 35.128C181.245 29.656 182.637 24.808 185.421 20.584C188.205 16.36 192.093 13.096 197.085 10.792C202.173 8.48799 207.981 7.33599 214.509 7.33599C223.917 7.33599 231.597 9.688 237.549 14.392C243.597 19.096 247.005 25.336 247.773 33.112H233.373C232.893 29.272 230.877 25.912 227.325 23.032C223.773 20.056 219.069 18.568 213.213 18.568C207.741 18.568 203.277 20.008 199.821 22.888C196.365 25.672 194.637 29.608 194.637 34.696C194.637 38.344 195.645 41.32 197.661 43.624C199.773 45.928 202.317 47.704 205.293 48.952C208.365 50.104 212.637 51.448 218.109 52.984C224.733 54.808 230.061 56.632 234.093 58.456C238.125 60.184 241.581 62.92 244.461 66.664C247.341 70.312 248.781 75.304 248.781 81.64C248.781 86.536 247.485 91.144 244.893 95.464C242.301 99.784 238.461 103.288 233.373 105.976C228.285 108.664 222.285 110.008 215.373 110.008Z"/> <path d="M281.169 8.632V109H268.065V8.632H281.169Z"/> <path d="M379.534 37.72C376.75 31.864 372.718 27.352 367.438 24.184C362.158 20.92 356.014 19.288 349.006 19.288C341.998 19.288 335.662 20.92 329.998 24.184C324.43 27.352 320.014 31.96 316.75 38.008C313.582 43.96 311.998 50.872 311.998 58.744C311.998 66.616 313.582 73.528 316.75 79.48C320.014 85.432 324.43 90.04 329.998 93.304C335.662 96.472 341.998 98.056 349.006 98.056C358.798 98.056 366.862 95.128 373.198 89.272C379.534 83.416 383.23 75.496 384.286 65.512H344.254V54.856H398.254V64.936C397.486 73.192 394.894 80.776 390.478 87.688C386.062 94.504 380.254 99.928 373.054 103.96C365.854 107.896 357.838 109.864 349.006 109.864C339.694 109.864 331.198 107.704 323.518 103.384C315.838 98.968 309.742 92.872 305.23 85.096C300.814 77.32 298.606 68.536 298.606 58.744C298.606 48.952 300.814 40.168 305.23 32.392C309.742 24.52 315.838 18.424 323.518 14.104C331.198 9.688 339.694 7.48 349.006 7.48C359.662 7.48 369.07 10.12 377.23 15.4C385.486 20.68 391.486 28.12 395.23 37.72H379.534Z"/> <path d="M500.492 109H481.388L428.684 29.08V109H415.58V8.488H428.684L481.388 88.264V8.488H494.492V109Z"/> <path d="M529.934 19.288V52.84H566.51V63.64H529.934V98.2H570.83V109H516.83V8.488H570.83V19.288H529.934Z"/> <path d="M643.506 109L619.602 67.96H603.762V109H590.658V8.632H623.058C630.642 8.632 637.026 9.928 642.21 12.52C647.49 15.112 651.426 18.616 654.018 23.032C656.61 27.448 657.906 32.488 657.906 38.152C657.906 45.064 655.89 51.16 651.858 56.44C647.922 61.72 641.97 65.224 634.002 66.952L659.202 109H643.506ZM603.762 57.448H623.058C630.162 57.448 635.49 55.72 639.042 52.264C642.594 48.712 644.37 44.008 644.37 38.152C644.37 32.2 642.594 27.592 639.042 24.328C635.586 21.064 630.258 19.432 623.058 19.432H603.762V57.448Z"/> </mask> <path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7.90833V8.632H39.1563ZM39.1563 98.2C52.1163 98.2 62.0043 94.792 68.8203 87.976C75.6363 81.064 79.0443 71.416 79.0443 59.032C79.0443 46.552 75.5883 36.808 68.6763 29.8C61.8603 22.792 52.0203 19.288 39.1563 19.288H21.0123V98.2H39.1563Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M122.825 22.288V52.84H159.401V63.64H122.825V98.2H163.721V109H109.721V8.488H163.721V19.288H122.825Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M215.373 110.008C208.749 110.008 202.797 108.856 197.517 106.552C192.333 104.152 188.253 100.888 185.277 96.76C182.301 92.536 180.765 87.688 180.669 82.216H194.637C195.117 86.92 197.037 90.904 200.397 94.168C203.853 97.336 208.845 98.92 215.373 98.92C221.613 98.92 226.509 97.384 230.061 94.312C233.709 91.144 235.533 87.112 235.533 82.216C235.533 78.376 234.477 75.256 232.365 72.856C230.253 70.456 227.613 68.632 224.445 67.384C221.277 66.136 217.005 64.792 211.629 63.352C205.005 61.624 199.677 59.896 195.645 58.168C191.709 56.44 188.301 53.752 185.421 50.104C182.637 46.36 181.245 41.368 181.245 35.128C181.245 29.656 182.637 24.808 185.421 20.584C188.205 16.36 192.093 13.096 197.085 10.792C202.173 8.48799 207.981 7.33599 214.509 7.33599C223.917 7.33599 231.597 9.688 237.549 14.392C243.597 19.096 247.005 25.336 247.773 33.112H233.373C232.893 29.272 230.877 25.912 227.325 23.032C223.773 20.056 219.069 18.568 213.213 18.568C207.741 18.568 203.277 20.008 199.821 22.888C196.365 25.672 194.637 29.608 194.637 34.696C194.637 38.344 195.645 41.32 197.661 43.624C199.773 45.928 202.317 47.704 205.293 48.952C208.365 50.104 212.637 51.448 218.109 52.984C224.733 54.808 230.061 56.632 234.093 58.456C238.125 60.184 241.581 62.92 244.461 66.664C247.341 70.312 248.781 75.304 248.781 81.64C248.781 86.536 247.485 91.144 244.893 95.464C242.301 99.784 238.461 103.288 233.373 105.976C228.285 108.664 222.285 110.008 215.373 110.008Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M281.169 9.632V109H268.065V8.632H281.169Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M379.534 36.72C376.75 31.864 372.718 27.352 367.438 24.184C362.158 20.92 356.014 19.288 349.006 19.288C341.998 19.288 335.662 20.92 329.998 24.184C324.43 27.352 320.014 31.96 316.75 38.008C313.582 43.96 311.998 50.872 311.998 58.744C311.998 66.616 313.582 73.528 316.75 79.48C320.014 85.432 324.43 90.04 329.998 93.304C335.662 96.472 341.998 98.056 349.006 98.056C358.798 98.056 366.862 95.128 373.198 89.272C379.534 83.416 383.23 75.496 384.286 65.512H344.254V54.856H398.254V64.936C397.486 73.192 394.894 80.776 390.478 87.688C386.062 94.504 380.254 99.928 373.054 103.96C365.854 107.896 357.838 109.864 349.006 109.864C339.694 109.864 331.198 107.704 323.518 103.384C315.838 98.968 309.742 92.872 305.23 85.096C300.814 77.32 298.606 68.536 298.606 58.744C298.606 48.952 300.814 40.168 305.23 32.392C309.742 24.52 315.838 18.424 323.518 14.104C331.198 9.688 339.694 7.48 349.006 7.48C359.662 7.48 369.07 10.12 377.23 15.4C385.486 20.68 391.486 28.12 395.23 37.72H379.534Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M500.492 109H481.388L428.684 29.08V109H415.58V8.488H428.684L481.388 88.264V8.488H494.492V109Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M529.934 22.288V52.84H566.51V63.64H529.934V98.2H570.83V109H516.83V8.488H570.83V19.288H529.934Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M648.506 109L619.602 63.96H603.762V109H590.658V8.632H623.058C630.642 8.632 637.026 9.928 642.21 12.52C647.49 15.112 651.426 18.616 654.018 23.032C656.61 27.448 657.906 32.488 657.906 38.152C657.906 45.064 655.89 51.16 651.858 56.44C647.922 61.72 641.97 65.224 634.002 66.952L659.202 109H643.506ZM603.762 57.448H623.058C630.162 57.448 635.49 55.72 639.042 52.264C642.594 48.712 644.37 44.008 644.37 38.152C644.37 32.2 642.594 27.592 639.042 24.328C635.586 21.064 630.258 19.432 623.058 19.432H603.762V57.448Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> </svg> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
solution2
0 ACCPTED 2020-09-24 07:21:28
Your <path> elements are drawing a stroke. The beginning and the end of a stroke have a linecap. The default on that linecap is butt , meaning that it will round the start and end with a small crop.
If you set the stroke-linecap on all <path> elements to square , then your path ends will not crop, be squared and fill the missing spaces.
path {
stroke-linecap: square;
}
const logo = document.querySelectorAll('#logo path'); for (i = 8; i < logo.length; i++) { console.log(`outline: ${logo[i].getTotalLength()}`); console.log(`mask: ${logo[i-8].getTotalLength()}`); } // funkcja dodająca odpowiednie komendy do każdej ścieżki const svgText = () => { const pathLengths = ['580', '470', '505', '235', '645', '614', '473', '558']; const delayArray = ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']; const delayArray2 = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000]; for (i = 8; i < logo.length; i++) { logo[i].style.strokeDasharray = pathLengths[i - 8] + 'px'; logo[i].style.strokeDashoffset = pathLengths[i - 8] + 'px'; logo[i].style.animationFillMode = 'forwards'; debugger; logo[i].animate([{ strokeDashoffset: '0' }], { duration: 3500, delay: delayArray2[i - 8], fill: 'forwards' }) logo[i - 8].animate([{ fill: 'white' }], { duration: 2000, delay: 5000, fill: 'forwards' }) } } svgText();
body, html { padding: 0px; margin: 0px; width: 100%; height: 100%; } .container { background-color: black; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } path { stroke-linecap: square; } .as-console-wrapper { max-height: 50px !important; }
<html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://kit.fontawesome.com/6c45422137.js" crossorigin="anonymous"></script> <title>SVGG</title> </head> <body> <div class="container"> <div class="svg"> <svg id="logo" width="400" height="118" viewBox="0 0 672 118" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.908325" y="0.335995" width="671" height="117" fill="black"> <rect fill="white" x="0.908325" y="0.335995" width="671" height="117"/> <path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7.90833V8.632H39.1563ZM39.1563 98.2C52.1163 98.2 62.0043 94.792 68.8203 87.976C75.6363 81.064 79.0443 71.416 79.0443 59.032C79.0443 46.552 75.5883 36.808 68.6763 29.8C61.8603 22.792 52.0203 19.288 39.1563 19.288H21.0123V98.2H39.1563Z"/> <path d="M122.825 19.288V52.84H159.401V63.64H122.825V98.2H163.721V109H109.721V8.488H163.721V19.288H122.825Z"/> <path d="M215.373 110.008C208.749 110.008 202.797 108.856 197.517 106.552C192.333 104.152 188.253 100.888 185.277 96.76C182.301 92.536 180.765 87.688 180.669 82.216H194.637C195.117 86.92 197.037 90.904 200.397 94.168C203.853 97.336 208.845 98.92 215.373 98.92C221.613 98.92 226.509 97.384 230.061 94.312C233.709 91.144 235.533 87.112 235.533 82.216C235.533 78.376 234.477 75.256 232.365 72.856C230.253 70.456 227.613 68.632 224.445 67.384C221.277 66.136 217.005 64.792 211.629 63.352C205.005 61.624 199.677 59.896 195.645 58.168C191.709 56.44 188.301 53.752 185.421 50.104C182.637 46.36 181.245 41.368 181.245 35.128C181.245 29.656 182.637 24.808 185.421 20.584C188.205 16.36 192.093 13.096 197.085 10.792C202.173 8.48799 207.981 7.33599 214.509 7.33599C223.917 7.33599 231.597 9.688 237.549 14.392C243.597 19.096 247.005 25.336 247.773 33.112H233.373C232.893 29.272 230.877 25.912 227.325 23.032C223.773 20.056 219.069 18.568 213.213 18.568C207.741 18.568 203.277 20.008 199.821 22.888C196.365 25.672 194.637 29.608 194.637 34.696C194.637 38.344 195.645 41.32 197.661 43.624C199.773 45.928 202.317 47.704 205.293 48.952C208.365 50.104 212.637 51.448 218.109 52.984C224.733 54.808 230.061 56.632 234.093 58.456C238.125 60.184 241.581 62.92 244.461 66.664C247.341 70.312 248.781 75.304 248.781 81.64C248.781 86.536 247.485 91.144 244.893 95.464C242.301 99.784 238.461 103.288 233.373 105.976C228.285 108.664 222.285 110.008 215.373 110.008Z"/> <path d="M281.169 8.632V109H268.065V8.632H281.169Z"/> <path d="M379.534 37.72C376.75 31.864 372.718 27.352 367.438 24.184C362.158 20.92 356.014 19.288 349.006 19.288C341.998 19.288 335.662 20.92 329.998 24.184C324.43 27.352 320.014 31.96 316.75 38.008C313.582 43.96 311.998 50.872 311.998 58.744C311.998 66.616 313.582 73.528 316.75 79.48C320.014 85.432 324.43 90.04 329.998 93.304C335.662 96.472 341.998 98.056 349.006 98.056C358.798 98.056 366.862 95.128 373.198 89.272C379.534 83.416 383.23 75.496 384.286 65.512H344.254V54.856H398.254V64.936C397.486 73.192 394.894 80.776 390.478 87.688C386.062 94.504 380.254 99.928 373.054 103.96C365.854 107.896 357.838 109.864 349.006 109.864C339.694 109.864 331.198 107.704 323.518 103.384C315.838 98.968 309.742 92.872 305.23 85.096C300.814 77.32 298.606 68.536 298.606 58.744C298.606 48.952 300.814 40.168 305.23 32.392C309.742 24.52 315.838 18.424 323.518 14.104C331.198 9.688 339.694 7.48 349.006 7.48C359.662 7.48 369.07 10.12 377.23 15.4C385.486 20.68 391.486 28.12 395.23 37.72H379.534Z"/> <path d="M494.492 109H481.388L428.684 29.08V109H415.58V8.488H428.684L481.388 88.264V8.488H494.492V109Z"/> <path d="M529.934 19.288V52.84H566.51V63.64H529.934V98.2H570.83V109H516.83V8.488H570.83V19.288H529.934Z"/> <path d="M643.506 109L619.602 67.96H603.762V109H590.658V8.632H623.058C630.642 8.632 637.026 9.928 642.21 12.52C647.49 15.112 651.426 18.616 654.018 23.032C656.61 27.448 657.906 32.488 657.906 38.152C657.906 45.064 655.89 51.16 651.858 56.44C647.922 61.72 641.97 65.224 634.002 66.952L659.202 109H643.506ZM603.762 57.448H623.058C630.162 57.448 635.49 55.72 639.042 52.264C642.594 48.712 644.37 44.008 644.37 38.152C644.37 32.2 642.594 27.592 639.042 24.328C635.586 21.064 630.258 19.432 623.058 19.432H603.762V57.448Z"/> </mask> <path d="M39.1563 8.632C50.1003 8.632 59.5563 10.696 67.5243 14.824C75.5883 18.856 81.7323 24.664 85.9563 32.248C90.2763 39.832 92.4363 48.76 92.4363 59.032C92.4363 69.304 90.2763 78.232 85.9563 85.816C81.7323 93.304 75.5883 99.064 67.5243 103.096C59.5563 107.032 50.1003 109 39.1563 109H7.90833V8.632H39.1563ZM39.1563 98.2C52.1163 98.2 62.0043 94.792 68.8203 87.976C75.6363 81.064 79.0443 71.416 79.0443 59.032C79.0443 46.552 75.5883 36.808 68.6763 29.8C61.8603 22.792 52.0203 19.288 39.1563 19.288H21.0123V98.2H39.1563Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M122.825 19.288V52.84H159.401V63.64H122.825V98.2H163.721V109H109.721V8.488H163.721V19.288H122.825Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M215.373 110.008C208.749 110.008 202.797 108.856 197.517 106.552C192.333 104.152 188.253 100.888 185.277 96.76C182.301 92.536 180.765 87.688 180.669 82.216H194.637C195.117 86.92 197.037 90.904 200.397 94.168C203.853 97.336 208.845 98.92 215.373 98.92C221.613 98.92 226.509 97.384 230.061 94.312C233.709 91.144 235.533 87.112 235.533 82.216C235.533 78.376 234.477 75.256 232.365 72.856C230.253 70.456 227.613 68.632 224.445 67.384C221.277 66.136 217.005 64.792 211.629 63.352C205.005 61.624 199.677 59.896 195.645 58.168C191.709 56.44 188.301 53.752 185.421 50.104C182.637 46.36 181.245 41.368 181.245 35.128C181.245 29.656 182.637 24.808 185.421 20.584C188.205 16.36 192.093 13.096 197.085 10.792C202.173 8.48799 207.981 7.33599 214.509 7.33599C223.917 7.33599 231.597 9.688 237.549 14.392C243.597 19.096 247.005 25.336 247.773 33.112H233.373C232.893 29.272 230.877 25.912 227.325 23.032C223.773 20.056 219.069 18.568 213.213 18.568C207.741 18.568 203.277 20.008 199.821 22.888C196.365 25.672 194.637 29.608 194.637 34.696C194.637 38.344 195.645 41.32 197.661 43.624C199.773 45.928 202.317 47.704 205.293 48.952C208.365 50.104 212.637 51.448 218.109 52.984C224.733 54.808 230.061 56.632 234.093 58.456C238.125 60.184 241.581 62.92 244.461 66.664C247.341 70.312 248.781 75.304 248.781 81.64C248.781 86.536 247.485 91.144 244.893 95.464C242.301 99.784 238.461 103.288 233.373 105.976C228.285 108.664 222.285 110.008 215.373 110.008Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M281.169 8.632V109H268.065V8.632H281.169Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M379.534 37.72C376.75 31.864 372.718 27.352 367.438 24.184C362.158 20.92 356.014 19.288 349.006 19.288C341.998 19.288 335.662 20.92 329.998 24.184C324.43 27.352 320.014 31.96 316.75 38.008C313.582 43.96 311.998 50.872 311.998 58.744C311.998 66.616 313.582 73.528 316.75 79.48C320.014 85.432 324.43 90.04 329.998 93.304C335.662 96.472 341.998 98.056 349.006 98.056C358.798 98.056 366.862 95.128 373.198 89.272C379.534 83.416 383.23 75.496 384.286 65.512H344.254V54.856H398.254V64.936C397.486 73.192 394.894 80.776 390.478 87.688C386.062 94.504 380.254 99.928 373.054 103.96C365.854 107.896 357.838 109.864 349.006 109.864C339.694 109.864 331.198 107.704 323.518 103.384C315.838 98.968 309.742 92.872 305.23 85.096C300.814 77.32 298.606 68.536 298.606 58.744C298.606 48.952 300.814 40.168 305.23 32.392C309.742 24.52 315.838 18.424 323.518 14.104C331.198 9.688 339.694 7.48 349.006 7.48C359.662 7.48 369.07 10.12 377.23 15.4C385.486 20.68 391.486 28.12 395.23 37.72H379.534Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M494.492 109H481.388L428.684 29.08V109H415.58V8.488H428.684L481.388 88.264V8.488H494.492V109Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M529.934 19.288V52.84H566.51V63.64H529.934V98.2H570.83V109H516.83V8.488H570.83V19.288H529.934Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> <path d="M643.506 109L619.602 67.96H603.762V109H590.658V8.632H623.058C630.642 8.632 637.026 9.928 642.21 12.52C647.49 15.112 651.426 18.616 654.018 23.032C656.61 27.448 657.906 32.488 657.906 38.152C657.906 45.064 655.89 51.16 651.858 56.44C647.922 61.72 641.97 65.224 634.002 66.952L659.202 109H643.506ZM603.762 57.448H623.058C630.162 57.448 635.49 55.72 639.042 52.264C642.594 48.712 644.37 44.008 644.37 38.152C644.37 32.2 642.594 27.592 639.042 24.328C635.586 21.064 630.258 19.432 623.058 19.432H603.762V57.448Z" stroke="white" stroke-width="14" mask="url(#path-1-outside-1)"/> </svg> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is it that whenever i enable a rotate animation on my angular component.ts my application becomes blank?
Why has my animation SVG animation stopped changing color?
Why does this element translate to 0,0,0 in my SVG/CSS/JS animation?
How do i use svg animation from codepen in my site?
Remove an SVG element after animation
Why does my canvas go blank after converting to image?
Why does my slider go blank after reaching the end?
How to change the points of a polygon in Snap.svg through animation?
Smooth svg polyline points animation to create dynamic financial stock chart
After javascript jsonp callback call to my server I got 404
Related Tags