Доброго времени суток. Возникла такая проблема:
Пишу небольшое приложение на Angular. Получаю данные с сервера, и на основе их строю изображение. В целом оно состоит из одинаковых линий, которые при появлении анимируются.
<svg style="position: absolute; top: 0; left: 0;" ng-repeat="historyLine in historyLines" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<path transform='rotate({{historyLine.peleng}}, 600, 600)' data-animate='0' id='history_line{{historyLine.id}}' fill='none' stroke='#030406' stroke-dasharray='300 300'
stroke-opacity="0.3" stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'
d='M 600 235 L 600 0'>
</path>
<animate attributeName="stroke-dashoffset" from="300" to="0" begin="0" dur="2s" fill="freeze"/>
</svg>
Все просто, каждый раз, когда с сервера приходит команда для отображения новой линии, я создаю копию SVG объекта (), и добавляю дополнительную информацию вместо {{historyLine.peleng}} и {{historyLine.id}}. Все работает, но поскольку каждый раз создавать объект SVG мне нет необходимости, то я попытался постоянно репитить path. И тут возникла проблема:
Дело в том, что path анимируется при появлении. и если просто повторять path без создания SVG объекта, то анимируется только первая появившаяся линия. Остальные, которые появились позже появляются так, как будто анимация уже прошла, несмотря на то, что их в DOM еще нет.
В общем, как создавать новую path и анимацию к ней.
Простой
