Vivus Trying to modify SVG attributes got Cannot read property 'baseVal' of undefined

Question

I am trying to animate an SVG line, the problem occurs when I try to modify the coordinates of the line after I used Vivus to animate it. My goal is to modify the coordinates of the line (for example change its size, position) and then animate it, and do the above procedure multiple times.

Problem with changing the attributes of an SVG line

1. Create Vivus Object (new Vivus("win_line_svg", {type: 'oneByOne', duration: 30});)
2. Trying to change the attributes of the SVG line(x1,y1,x2,y2) got error (Cannot read property 'baseVal' of undefined")

Trying to resize the line before creating the Vivus Object will work.

You can reproduce the problem in the JSFiddle:

1. Click on Play button
2. Click on Resize button => (Cannot read property 'baseVal' of 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>