Как к каждому элменту path добавить свою анимацию?

Question

[Drm]

Доброго времени суток. Возникла такая проблема:

Пишу небольшое приложение на 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 и анимацию к ней.