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

}