绘制SVG渲染的游戏地图中的笛卡尔坐标

Question

我正在开发一个网页游戏，玩家在5000,3000公里宽的地图上移动。资源，基地等的坐标作为x，y对在正常的笛卡尔坐标系中存储在数据库中。

当玩家查看他的车辆屏幕时，我想显示他/她的vicinty区域的地图。这个例子的窗口大小为50公里。

我认为svg是我动态渲染这张地图的最佳方式。由于地形基本上像一个台球桌（没有任何特征的平面），因此我没有使用贴图。地图将只是50公里和50公里的窗口，其中标有兴趣点。

我已经读过，你可以绘制基于另一个坐标系旁边默认的（（0,0）在左上角）svg点。我的问题是，在我的测试平台中，我无法在常规笛卡尔坐标系中渲染一条线。

该代码绘制什么对我来说：

<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> 

我在想，倒车y和翻译它最大值为y会做的伎俩。

您的见解将不胜感激。

Answer 1

当您在平移之前进行缩放时，将在缩放之后的坐标系中给出平移坐标。因此，您将所有内容翻译为图像顶部的以上的点200个像素点。你想要做的

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

或

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