Text is drawing immediately

[saewitz]

Hi, because this library doesn't support animating text, I converted my text into paths. However, the text is being drawn immediately in a oneByOne animation, before the elements defined before it. Here is a small reproducible example:

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <polygon style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" points="98.095 186.856 217.405 127.227 361.845 99.665 445.304 191.492 422.342 319.34 295.69 428.629 154.023 417.35 38.107 379.199 51.071 272.96 80.155 224.015"/>
  <path d="M 87.154 132.196 L 84.447 131.964 Q 84.911 130.591 86.067 129.817 Q 87.222 129.044 89.127 129.044 Q 91.108 129.044 92.056 129.842 Q 93.003 130.639 93.003 131.79 Q 93.003 132.254 92.921 132.776 Q 92.839 133.298 92.346 135.521 Q 91.94 137.358 91.94 138.093 Q 91.94 138.751 92.172 139.553 L 89.475 139.553 Q 89.31 138.992 89.272 138.393 Q 88.663 139.07 87.87 139.432 Q 87.077 139.795 86.275 139.795 Q 84.998 139.795 84.167 138.958 Q 83.335 138.122 83.335 136.807 Q 83.335 135.338 84.249 134.458 Q 85.163 133.578 87.512 133.394 Q 89.494 133.23 90.161 132.998 Q 90.335 132.418 90.335 132.07 Q 90.335 131.625 89.977 131.326 Q 89.62 131.026 88.914 131.026 Q 88.169 131.026 87.739 131.33 Q 87.309 131.635 87.154 132.196 Z M 89.794 134.767 Q 89.542 134.835 89.127 134.893 Q 87.038 135.144 86.4 135.628 Q 85.946 135.976 85.946 136.566 Q 85.946 137.049 86.294 137.383 Q 86.642 137.716 87.212 137.716 Q 87.841 137.716 88.397 137.412 Q 88.953 137.107 89.228 136.628 Q 89.504 136.15 89.716 135.135 Z" style="white-space: pre;"/>
</svg>

new Vivus('example', { type: 'oneByOne', duration: 1000 })

Do you know why it's drawing out of order? Thanks for this library!

[saewitz]

Hi @maxwellito, could you please help with this?

[maxwellito]

Hello!In this case, I would suspect the script that created the outlines of the text wasn’t optimised and created weird shapes. Can you try to pass your SVG in SVGOMG? I suspect it will fix the paths.SVGOMG - SVGO's Missing GUIjakearchibald.github.ioMessage ID: ***@***.***>