SVG图像中的反转坐标

我使用svg从一组坐标中制作图像。我在我的java脚本中加载JSON对象，然后根据需要创建所需的元素（svg框架，多边形，线等）。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], ....

任何帮助，将不胜感激。

来源

2013-12-22 Saif Asif

[表]（http://stackoverflow.com/a/9053315/1169519）的基本坐标换算。 – Teemu

我尝试了转换（沿着y轴镜像它）。计算时间比平常要长（大约几秒钟），并且图像没有出现。 –

您应该考虑在原始数据中创建正确的坐标，而不是使用JS进行长轮询转换。关于隐藏的元素，它们现在位于Y轴上（位于'svg'的顶部），您需要通过为每个Y坐标添加一个合适的值将它们移动到正确的位置。 – Teemu

经过大量的重新搜索和尝试/错误尝试后，我想出了解决方案，我将在此分享给其他可能正在搜索同一事物的人。原来的问题是，我有一系列的坐标（国家），我需要在我的页面上绘制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}; 
}

来源

2013-12-25 15:49:01

SVG图像中的反转坐标

回答

相关问题