Invert y axis on d3 on console command

So I'm trying to identify points in a map, I'm doing this by clicking on her and getting the output in the console of X, Y of that dot respectively to my map coordinates, however as we all know the Y axis is not as we are used to it from math lessons and actually starts from the top left corner. I've been googling around for a few hours but I can't find a way to invert the Y axis in order for it to be starting from bottom left corner.

<script>
    width = 14990/5,
    height = 15100/5,
    bg = "https://s3-us-west-1.amazonaws.com/riot-developer-portal/docs/map11.png";


svg = d3.select("#map").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "yossi");

svg.append('image')
    .attr('xlink:href', bg)
    .attr('x', '0')
    .attr('y', '0')
    .attr('width', width)
    .attr('height', height);

var yossi = document.querySelector('#yossi');

// Get point in global SVG space
function cursorPoint(evt){
  pt = yossi.createSVGPoint();
  pt.x = evt.clientX*5-120; pt.y = evt.clientY*5-120;
  return pt.matrixTransform(yossi.getScreenCTM());
}

yossi.addEventListener('click',function(evt){
  var loc = cursorPoint(evt);
  console.log(loc.x +',' + loc.y);
  // Use loc.x and loc.y here
},false);
</script>

This is my javascript file, please help :).