反转SVG图像中的坐标答案

【问题标题】：Inverting co-ordinates in SVG image反转SVG图像中的坐标
【发布时间】：2013-12-25 23:49:01
【问题描述】：

我正在使用 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], ....

任何帮助将不胜感激。

【问题讨论】：

A table 的基本坐标转换。
我尝试了转换（沿 y 轴镜像）。计算时间比平时长（大约几秒钟），然后图像根本没有出现。
您应该考虑在原始数据中创建正确的坐标，而不是使用 JS 进行长轮询转换。隐藏元素是什么，它们现在位于 Y 轴上方（位于 svg 的顶部），您需要通过为每个 Y 添加合适的值来将它们移动到正确的位置坐标。

标签： javascript svg

【解决方案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};
}

【讨论】：