Как реализовать данный функционал с помощью SVG?

Question

[Алексей Иванов]

Добрый день! Подскажите, пожалуйста, как можно реализовать именно появление и исчезание синих элементов диаграммы SVG как на видео? Прошу подтолкнуть на решение, свойства css, через которые можно так сделать. Пока идей нет..

Сама SVG

<svg width="926" height="707" viewBox="0 0 926 707" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path id="path1" data-image="assets/image/kadastr.svg" d="M493.309 124.08C533.036 125.253 571.761 136.898 605.618 157.853C639.474 178.808 667.275 208.339 686.245 243.495L676.265 248.953C658.244 215.554 631.832 187.5 599.669 167.593C567.506 147.685 530.716 136.622 492.976 135.508L493.309 124.08Z" fill="#00A0E0"/>
      <path id="path2" d="M695.432 246.078C715.887 282.203 726.394 323.106 725.883 364.617C725.372 406.128 713.86 446.761 692.522 482.371L672.389 470.307C691.593 438.257 701.953 401.688 702.413 364.328C702.873 326.969 693.417 290.155 675.007 257.643L695.432 246.078Z" fill="#00A0E0"/>
      <path id="path3" d="M694.867 492.146C672.996 528.547 641.858 558.493 604.632 578.929C567.406 599.364 525.424 609.557 482.972 608.468L483.896 572.477C519.98 573.403 555.665 564.739 587.307 547.369C618.949 529.999 645.416 504.544 664.007 473.603L694.867 492.146Z" fill="#00A0E0"/>
      <path id="path4" d="M475.197 615.122C431.597 613.714 389.174 600.634 352.351 577.245C315.529 553.857 285.656 521.018 265.848 482.152L309.292 460.011C325.138 491.103 349.036 517.375 378.494 536.086C407.952 554.796 441.891 565.26 476.771 566.387L475.197 615.122Z" fill="#00A0E0"/>
      <path id="path5" d="M257.272 479.66C236.778 439.928 227.319 395.425 229.882 350.792C232.446 306.16 246.938 263.033 271.846 225.908L323.717 260.711C305.036 288.554 294.167 320.9 292.245 354.374C290.322 387.849 297.416 421.226 312.787 451.025L257.272 479.66Z" fill="#00A0E0"/>
      <path id="path6" d="M269.069 214.303C292.571 178.149 324.854 148.541 362.9 128.244C400.947 107.947 443.518 97.6234 486.636 98.2378L485.545 174.778C455.362 174.348 425.563 181.574 398.93 195.782C372.298 209.99 349.7 230.716 333.248 256.024L269.069 214.303Z" fill="#00A0E0"/>
      <line y1="-2.5" x2="97.3499" y2="-2.5" transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 240 134)" stroke="#E7E7E7" stroke-width="5"/>
      <line y1="-2.5" x2="94" y2="-2.5" transform="matrix(-1 0 0 1 162 81)" stroke="#E7E7E7" stroke-width="5"/>
      <circle r="10" transform="matrix(-1 0 0 1 64 78)" fill="#E7E7E7"/>
      <circle r="5" transform="matrix(-1 0 0 1 64 78)" fill="white"/>
      <line x1="158" y1="373.5" x2="8" y2="373.5" stroke="#E7E7E7" stroke-width="5"/>
      <circle cx="10" cy="374" r="10" transform="rotate(-180 10 374)" fill="#E7E7E7"/>
      <circle cx="10" cy="374" r="5" transform="rotate(-180 10 374)" fill="white"/>
      <line x1="237.387" y1="610.08" x2="156.387" y2="664.08" stroke="#E7E7E7" stroke-width="5"/>
      <line x1="158" y1="663.5" x2="64" y2="663.5" stroke="#E7E7E7" stroke-width="5"/>
      <circle cx="60" cy="664" r="10" transform="rotate(-180 60 664)" fill="#E7E7E7"/>
      <circle cx="60" cy="664" r="5" transform="rotate(-180 60 664)" fill="white"/>
      <line y1="-2.5" x2="97.3499" y2="-2.5" transform="matrix(0.83205 0.5547 0.5547 -0.83205 690 608)" stroke="#E7E7E7" stroke-width="5"/>
      <line y1="-2.5" x2="94" y2="-2.5" transform="matrix(1 0 0 -1 768 661)" stroke="#E7E7E7" stroke-width="5"/>
      <circle r="10" transform="matrix(1 0 0 -1 866 664)" fill="#E7E7E7"/>
      <circle r="5" transform="matrix(1 0 0 -1 866 664)" fill="white"/>
      <line id="line3" y1="-2.5" x2="150" y2="-2.5" transform="matrix(1 0 0 -1 768 371)" stroke="#E7E7E7" stroke-width="5"/>
      <circle r="10" transform="matrix(1 0 0 -1 916 374)" fill="#E7E7E7"/>
      <circle r="5" transform="matrix(1 0 0 -1 916 374)" fill="white"/>
      <line x1="688.613" y1="131.92" x2="769.613" y2="77.9199" stroke="#E7E7E7" stroke-width="5"/>
      <line x1="768" y1="78.5" x2="862" y2="78.5" stroke="#E7E7E7" stroke-width="5"/>
      <path d="M876 78C876 83.5228 871.523 88 866 88C860.477 88 856 83.5228 856 78C856 72.4772 860.477 68 866 68C871.523 68 876 72.4772 876 78Z" fill="#E7E7E7"/>
      <circle cx="866" cy="78" r="5" fill="white"/>                
</svg>

Answer 1

[RAX7]

Почитай как делают рукописный текст на SVG https://css-tricks.com/animate-calligraphy-with-svg/

Comments

[Алексей Иванов]

ага. Спасибо большое!

Answer 2

[lagudal]

я бы сегменты диаграммы делал stroke, без заливки - тогда можно спокойно применить манипуляции с stroke-dashoffset, напрямую воздействуя на эти сегменты.
В примере я дал им общий класс, и отдельные id, на случай, если нужны также манипуляции с конкретным сегментом по клику или hover какой то сслыки. Здесь hover по ссылке класса .line6-link воздействует через селектор + на следующий за ним сегмент с айдишником line6 - это просто пример, как видно, линк встроен в svg. Если в реальном проекте линки вынесены из svg, то воздействовать так просто не получится, надо будет скорее всего использовать js.