@ivanovav27
Занимаюсь разработкой сайтов

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

Добрый день! Подскажите, пожалуйста, как можно реализовать именно появление и исчезание синих элементов диаграммы 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>
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
RAX7
@RAX7
Почитай как делают рукописный текст на SVG https://css-tricks.com/animate-calligraphy-with-svg/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@lagudal
я бы сегменты диаграммы делал stroke, без заливки - тогда можно спокойно применить манипуляции с stroke-dashoffset, напрямую воздействуя на эти сегменты.
В примере я дал им общий класс, и отдельные id, на случай, если нужны также манипуляции с конкретным сегментом по клику или hover какой то сслыки. Здесь hover по ссылке класса .line6-link воздействует через селектор + на следующий за ним сегмент с айдишником line6 - это просто пример, как видно, линк встроен в svg. Если в реальном проекте линки вынесены из svg, то воздействовать так просто не получится, надо будет скорее всего использовать js.

Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы