Can't manipulate coordiantes of polygon dynamically

I would like to make an image appear as hexagon. Therefore I am using svg.

    <svg id="hexagon">
      <defs>
        <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
          <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg"/>
        </pattern>
      </defs>
      <polygon fill="url(#pattern1)" points=" 121.25 0 242.5  100 242.5 300 121.25 400 121.25 400 0 300 0 100"/>
    </svg>

Now I want to manipulate the coordinates of this svg depending on position of mouse on screen. So if the mouse-cursor is on right side of screen the first point of hexagon (the upper one) should be at right edge of screen too. Otherwise if the mouse-cursor is on left side of screen the first point of hexagon should be at left edge of screen. The position of this upper point should change dynamically depending on mouse-cursor position.

For testing i tried this one to access the points but it did not work:

<script>
  var polygon = document.getElementById("hexagon");
  polygon.setAttribute("points", "0,0  100,100 200,200");
</script> 

What did i do wrong?