Manipulate SVG with javascript

by Anov Siradj

HTML

<button onclick="moveLeft();">Left</button>
<button onclick="moveRight();">Right</button>
<svg style="border: 1px blue solid;">
    <circle id="myCircle" cx="100" cy="100" r="30" fill="green" />
</svg>

JavaScript

//I am not sure if this is the prefered way to manipulate SVG. This is just something I figured out.

var myCircle = document.getElementById('myCircle');

function moveLeft()
{
    myCircle.cx.baseVal.value-=3;
}

function moveRight()
{
    myCircle.cx.baseVal.value+=3;
}