Question

我正在使用svg从一组坐标制作图像。我在我的java脚本中加载JSON对象，然后根据需要创建所需的元素（svg框架，多边形，线等）。

 //x1,x2,y1,y2 are all passed here as method arguments
 var vLine = document.createElementNS(svgNS, "svg:line")
 vLine.setAttributeNS( null, "x1", new String( x1  ) + "px" );
 vLine.setAttributeNS( null, "y1", new String( y1  ) + "px" );
 vLine.setAttributeNS( null, "x2", new String( x2  ) + "px" );
 vLine.setAttributeNS( null, "y2", new String( y2  ) + "px" );
 vLine.setAttributeNS( null, "style", "stroke-width:1;stroke:black");

图像显示正常，但问题是它沿y轴反转显示。我做了一些阅读，并且发现初始坐标系统从页面的左上角开始而不是从右下角开始，如果我按比例缩放，它就会好起来。所以我在我的行中添加了另一个属性

 vLine.setAttributeNS( null, "transform" , "scale(-1)")

但似乎我的图像不再显示在svg框架中了。我最好的猜测是，如果我必须改变缩放因子，那么我也必须改变坐标以及x和y轴上的某些东西，以确保图像适合框架，但我我无法弄清楚控制坐标的因素。

//A sample of my co-ordinates json
[9.632932,47.347601],[9.594226,47.525058],[9.896068,47.580197], ....

任何帮助都将不胜感激。

Answer 1

经过大量的重新搜索和尝试/错误尝试后，我想出了解决方案，我将在这里分享给其他可能正在搜索相同内容的人。最初的问题是我有一系列（国家/地区）的坐标，我需要在SVG元素内的页面上进行映射。问题是这些坐标是真实世界的坐标，它们需要被反转（镜像），以便它们可以直接显示在HTML坐标系统上（正如我在问题中描述的那样）。我使用以下算法来转换它们。

//Here x and y are my co-ordinates
function transform(x,y){
        if(x === 0 && y === 0 ) {
            y = 90;
        }
        var tranformedX = (totalWidth/360)*(x+180);
        var tranformedY = (totalWidth/360)*(-(y/Math.cos(Math.PI*(y/360))))+275;
        return {x: tranformedX, y: tranformedY};
}

反转SVG图像中的坐标

1 个答案: