SVGレンダリングされたゲームマップでデカルト座標をプロットする

Question

私は、プレイヤーが5000,3000 kmの地図上を移動しているウェブゲームを開発しています。リソース、ベースなどの座標は、通常のデカルト座標系のx、yペアとしてデータベースに格納されます。

プレーヤーが自分の車の画面を見ると、その地域の地図を自分の周辺に表示する必要があります。この例のこのウィンドウのサイズは50 kmです。

私はこのマップをすぐにレンダリングするにはsvgが最善の方法だと思います。地形は基本的にプールテーブル（機能なしのフラット）に似ているので、私はタイルマップを使用していません。地図は50km×50kmの窓になり、興味のある点がプロットされます。

私は、デフォルトのものの横にある別の座標系（左上の（0,0））に基づいてsvgの点をプロットできると読んでいます。私の問題は、私のテストベッドでは、通常のデカルト座標系で線を描くことができないということです。

このコードは私のために何をプロットしていない：私は最高にY反転し、それを翻訳すると、yは、トリックを行うだろうと考えていた

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

。

あなたの洞察は非常に高く評価されます。

Answer 1

変換する前に縮尺を変更すると、スケーリングの後に座標系に変換座標が与えられます。つまり、すべてをポイント200ピクセルに翻訳しています。以上画像の上部。あなたは私のためにそれをやったこと

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

または

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