2011-08-13 21 views
0

なぜこのSVGインラインコードは、ドットを中央に持つ60 x 40のボックスを生成しませんか?SVG座標変換

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> 

答えて

4

コードはその後、60 40ピクセルのSVGを作成している:

  • は(500、500)を中心とする円を描き
  • スケールは、(500に移動円を変換 - 500)
  • あなたはtransform="translate(-470,520) scale(1,-1)"に変換を変更する場合は、どのような私を取得する必要-20)

、30(への移動にそれを変換する変換あなたが望むと思う。

+2

ありがとうございます。私はmin-yをmax-yと翻訳していませんでした! – Mel

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

} 
関連する問題