Vivus При попытке изменить атрибуты SVG не удалось прочитать свойство baseVal, равное undefined

Question

Я пытаюсь анимировать строку SVG, проблема возникает, когда я пытаюсь изменить координаты строки после того, как я использовал Vivus для ее анимации. Моя цель - изменить координаты линии (например, изменить ее размер, положение), а затем анимировать ее и выполнить описанную выше процедуру несколько раз.

Проблема с изменением атрибутов строки SVG

1. Create Vivus Object (new Vivus ("win_line_svg", {type: 'oneByOne', duration: 30});)
2. Попытка изменить атрибуты строки SVG (x1, y1 , x2, y2) произошла ошибка (не удалось прочитать свойство baseVal of undefined ")

Попытка изменить размер строки перед созданием объекта Vivus будет работать.

Вы можете воспроизвести проблема в JSFiddle:

1. Нажмите кнопку «Воспроизвести»
2. Нажмите кнопку «Изменить размер» => (Невозможно прочесть свойство baseVal из undefined ")

function play() {
  myVivus_Win_Line = new Vivus("win_line_svg", {
    type: 'oneByOne',
    duration: 30
  });
  myVivus_Win_Line.play();
}

function resize() {
  line = document.getElementById("line");
  line.y2.baseVal.value++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.5/vivus.min.js"></script>
<button onclick="play()">Play</button>
<button onclick="resize()">Resize</button>

<!-- win line -->
<svg style="position: absolute; z-index:0; opacity: 100;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" id='win_line_svg'>
  <line x1="50" y1="0" x2="50" y2="10" style="stroke:black;stroke-width:2" id='line' />
</svg>