SVG Coordinate translation - svg

Question

Why doesn't this SVG inline code produce a box 60 by 40 with a dot in the middle?
I would like to plot items on a regular Cartesian coordinate map using SVG. The data I would have would be the size of the displayable map and center point on the Cartesian main map.
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 60 40">
<g transform="translate(-470,480) scale(1,-1)">
<circle title="Center" cx="500" cy="500" r="3" fill="red"/>
</g>
</svg>

Answer 1

Your code is creating an 60 by 40 pixel SVG, then:
Draws a circle centred on (500, 500)
The scale transform moves the circle to (500, -500)
The translate transform moves it to (30, -20)
If you change the transform to transform="translate(-470,520) scale(1,-1)" you should get what I think you want.

Answer 2

I came up with this code snippet that will create a map of with Cartesian coordinates and plot them in an SVG window using those coordinates. Hope this will help somebody.
The function takes the center of the map as $x, $y and draws the map around that coordinate.
public static function xyMap( $x, $y, $width = 0, $height = 0, $show = array('X')) {
$minx = $x - ($width / 2);
$maxx = $x + ($width / 2);
if ($minx < 0) {
$minx = 0;
$maxx = $width;
} elseif ($maxx > Yii::app()->params['maxMapX']) {
$maxx = Yii::app()->params['maxMapX'];
$minx = Yii::app()->params['maxMapX'] - $width;
}
$miny = $y - ($height / 2);
$maxy = $y + ($height / 2);
if ($miny < 0) {
$miny = 0;
$maxy = $height;
} elseif ($maxy > Yii::app()->params['maxMapY']) {
$maxy = Yii::app()->params['maxMapY'];
$miny = Yii::app()->params['maxMapY'] - $height;
}
$x_xform = -1 * $minx;
$y_xform = $maxy;
$x_scale = 1;
$y_scale = -1;
echo "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"$width\" height=\"$height\" viewBox=\"0 0 $width $height\">\n";
echo "<g transform=\"translate($x_xform, $y_xform) scale($x_scale,$y_scale)\">\n";
echo "<rect x=\"$minx\" y=\"$miny\" width=\"$width\" height=\"$height\" stroke=\"black\" stroke-width=\"2\" fill=\"white\" />\n";
echo "<circle title=\"Center\" cx=\"$x\" cy=\"$y\" r=\"3\" fill=\"red\"/>\n";
echo "</g>\n</svg>\n";
}