4

Как можно сделать анимацию рисования линии от верха к первому тексту, затем появления текста и также с остальными линиями и текстом?

<svg height="800" width="800" style="font-size:2rem">
    <path id="lineAB" d="M 400 350 l 0 -280" stroke="red" stroke-width="3" fill="none" />
    <text x="150" y="370" dx="-30">Example text text text text text</text>
      <!-- Label the points -->
      <path id="lineAB" d="M 400 680 l 0 -280" stroke="red" stroke-width="3" fill="none" />
    <text x="150" y="685" dx="-30">Example text text text text text</text>
    <path id="lineAB" d="M 400 990 l 0 -280" stroke="red" stroke-width="3" fill="none" />
    <text x="150" y="985" dx="-30">Example text text text text text</text>
    </svg>

1 ответ 1

5

Вот css+keyframes версия, длины путей одинаковые поэтому получилось так мало css:

<svg height="800" width="800" style="font-size:2rem">
  <path id="lineAB" d="M 400 350 l 0 -280" stroke="red" stroke-width="3" fill="none" />
  <text id="text1" x="150" y="370" dx="-30">Example text text text text text</text>
  <path id="lineBC" d="M 400 680 l 0 -280" stroke="red" stroke-width="3" fill="none" />
  <text id="text2" x="150" y="685" dx="-30">Example text text text text text</text>
  <path id="lineCD" d="M 400 990 l 0 -280" stroke="red" stroke-width="3" fill="none" />
  <text id="text3" x="150" y="985" dx="-30">Example text text text text text</text>
  <style>
    path {
      /* на всех путях одинаковая анимация продолжительностью 3 сек */
      animation: path_animation 3s forwards;
      /* ширина штриха и пробела равны длине пути */
      stroke-dasharray: 280 280; 
      /* изначально ставим отрицательный отступ*/
      stroke-dashoffset: -280; 
    }

    text {
      /* текст с начала полностью прозрачный */
      opacity: 0; 
      /* анимация текста у всех одинаковая */
      animation: text_animation 1s forwards;
    }

    /* задержки включения анимации */
    #text1  {animation-delay: 3s}
    #lineBC {animation-delay: 4s}
    #text2  {animation-delay: 7s}
    #lineCD {animation-delay: 8s}
    #text3  {animation-delay: 11s}

    /* анимируем сдвиг пунктира */
    @keyframes path_animation {
      0%   {stroke-dashoffset: -280}
      100% {stroke-dashoffset: 0}
    }

    /* анимируем порзрачность */
    @keyframes text_animation {
      0%   {opacity: 0}
      100% {opacity: 1}
    }
  </style>
</svg>

2
  • @Arthur я видел его, но мне не показалось это настолько простым, чтобы вообще садится за это в рамках ответов на so. сами квадраты так нарисовать не сложно, а вот спроецировать туда интерфейс рабочий, тянет на проект за который неплохо должны заплатить 8 мая 2019 в 18:48
  • Тогда пролёт. Этот вопрос не тянет на 1.5к репы?)) Наверно в целях продвижения вопросов, этот вопрос даст слабый выхлоп, можем забыть об этом
    – Arthur
    8 мая 2019 в 18:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.