SVG坐标翻译

Question

为什么这个SVG嵌入代码不能在中间用点生成一个60乘40的框？

我想使用SVG在常规笛卡尔坐标图上绘制项目。我想要的数据将是笛卡尔主地图上的可显示地图和中心点的大小。

<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

您的代码创建60由40像素SVG，则：

• 绘制中心的圆（500，500）
• 的尺度变换移动圈（500， - 500）
• 的翻译转换它移动到（30，-20）

如果更改转换为transform="translate(-470,520) scale(1,-1)"你应该明白我的想你想要。

Answer 2

我想出了这个代码片断，它将创建一个带有笛卡尔坐标的地图，并使用这些坐标将它们绘制在SVG窗口中。希望这会有助于某人。

该函数以地图的中心为$ x，$ y并围绕该坐标绘制地图。

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

}