Как запустить SVG-анимацию с помощью JavaScript? (Нет jQuery)

У меня есть путь к линии SVG, анимированный с помощью этого образца, который я нашел:

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 130;
  animation: dash 6s 0s forwards infinite;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 290;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewbox = "0 0 25 100" xmlns = "http://www.w3.org/2000/svg">
<path class = "path" d = "M0 50 L 12 50, 12 0, 25 0" fill = "transparent"></path>
</svg>

Он работает нормально, но срабатывает при загрузке страницы, есть ли способ (скажем, с помощью кнопки) запустить эту анимацию с помощью Javascript?

Я могу работать с JS, но я новичок в анимации CSS и SVG.

Кто-нибудь может дать мне пример того, как я могу сделать это с моим настоящим CSS?

Спасибо.

javascript css svg

02.05.2018 21:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 080

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы должны включить свою анимацию в класс css:

    .dash-animate {
        animation: dash 6s 0s forwards infinite;
    }

    @keyframes dash {
      from {
        stroke-dashoffset: 290;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

А затем просто примените этот класс, когда / где вы хотите использовать js:

var button = getElementById('some-button');

button.addEventListner('click', function() {
  var elements = document.querySelectorAll('.path');
  Array.prototype.forEach.call(elements, function(el) {
    el.classList.add('dash-animate');
  });
});

02.05.2018 21:32

var svgPattern = document.getElementById("svg")
svgPattern.style.display = "none";
function showSVG(){
svgPattern.style.display = "block";
}

                svg{
                    position:absolute;
                    width:100%;
                    height:100%;
                    left:0%;
                    top:0%;
                    display:block;
                    background:transparent;
                }
                
                .path {
                    stroke:black;
                    stroke-dasharray: 290;
                    stroke-dashoffset: 130;
                    animation: dash 6s 0s forwards infinite;
                    stroke-width:2px;
                    stroke-linecap:round;
                    stroke-linejoin:round;
                }
                
                @keyframes dash {
                  from {
                    stroke-dashoffset: 290;
                  }
                  to {
                    stroke-dashoffset: 0;
                  }
                }

<button id  = "button" onclick = "showSVG()">Click</button>
               <svg id = "svg" viewbox = "0 0 25 100" xmlns = "http://www.w3.org/2000/svg">
                    <path class = "path" d = "M0 50 L 12 50, 12 0, 25 0" fill = "transparent"></path>
                </svg>

02.05.2018 21:32

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    display: block;
    background: transparent;
}

.path {
    stroke: black;
    stroke-dasharray: 290;
    stroke-dashoffset: 130;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dashoffset: 290;
}

.animated {
    animation: dash 6s 0s forwards infinite;
    stroke-dashoffset: 0;
}

@keyframes dash {
    from {
        stroke-dashoffset: 290;
    }
    to {
        stroke-dashoffset: 0;
    }
}

Затем вы можете добавить класс .animated на свой путь с помощью js, когда вам это нужно.

02.05.2018 21:32

Ответ принят как подходящий

Вы также можете использовать синтаксис анимации SMIL вместо анимации CSS. По общему признанию, это имеет обратную сторону: он не работает в браузерах Microsoft (как IE, так и Edge).

var animation = document.getElementById("dash");

function showSVG() {
  animation.beginElement();
}

svg {
  position: relative;
  width: 100%;
  height: 150px;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<button id = "button" onclick = "showSVG()">Click</button>
<svg id = "svg" viewbox = "0 0 25 100" xmlns = "http://www.w3.org/2000/svg">
  <path class = "path" d = "M0 50 L 12 50, 12 0, 25 0" fill = "transparent">
  <animate id = "dash" 
    attributeName = "stroke-dashoffset"
    from = "290" to = "0"
    begin = "indefinite" 
    dur = "6s" 
    fill = "freeze" />
  </path>
</svg>

Эта анимация запускается один раз при каждом нажатии. Если вы хотите, чтобы он повторялся через фиксированные интервалы, как предписывает CSS animation-repeat: infinite, используйте

<animate id = "dash" attributeName = "stroke-dashoffset"
    from = "290" to = "0"
    begin = "indefinite" dur = "6s" repeatCount = "indefinite" />

02.05.2018 22:34

Другие вопросы по теме

Анимировать фоновое изображение в наложении

Логотипы перекрываются, когда размер окна меньше или на мобильном устройстве / планшете?

Один высокий div рядом с двумя более короткими div на рабочем столе и сложенный на мобильном устройстве с помощью Bootstrap 4

Пиксели в моем CSS

Как изменить класс в зависимости от того, прокручивается ли страница вверх или нет?

Моя карусель "Материализация" не работает. Я использую последнюю версию 1.0.0

.active класс в настраиваемом элементе управления каруселью начальной загрузки

Как избавиться от границы ленты с помощью CSS?

Эффект размытия в IE11 для создания матового стекла

Заставить кнопку идти вместе с изменением высоты анимации выпадающего меню

Как запустить SVG-анимацию с помощью JavaScript? (Нет jQuery)

Ответы 4

Другие вопросы по теме

Похожие вопросы