Question

I am developing a web game where players are moving around on a map that is 5000,3000 km wide. The coordinates of resources, bases, etc. are stored in the database as x,y pairs in a normal Cartesian coordinate system.

When a player views his vehicle screen, I want to display a map of the area in his/her vicinty. The size of this window for this example would be 50 km.

I think that svg is the best way for me to render this map on the fly. I am not using a tile map as the terrain is basically like a pool table (flat with no features). The map will be just the 50km by 50 km window with points of interest plotted in it.

I have read that you can plot points in svg based upon another coordinate system beside the default one ((0,0) in the top left). My problem is that in my testbed I cannot render a line in a regular Cartesian coordinate system.

This code plots nothing for me:

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
  <g transform="scale(1,-1) translate(0,200)">
    <line x1="20" y1="20" x2="40" y2="40" stroke="red" stroke-width="4" />
  </g>
</svg>

I was thinking that reversing y and translating it to max y would do the trick.

Your insights would be greatly appreciated.

Answer 1

When you scale before you translate, the translation coordinates are given in the coordinate system after scaling. So you’re translating everything to a point 200 pixels above the top of the image. You want to do either of

transform="scale(1,-1) translate(0,-200)"

or

transform="translate(0,200) scale(1,-1)"