Google Maps Polygon到SVG路径

Question

我有在Google Maps API中绘制以下多边形的坐标：

以下是坐标示例：

longitude: -71.09972, latitude: 9.15553

按照此帖子中的墨卡托投影公式：Convert a Google Maps polygon path to an SVG path，我得到一个SVG路径，其值为负值：

M-50.559802168888886,121.46151557464762 -50.589327502222226,121.46285530595195 -50.643108835555566,121.428264939842 ...

当我尝试绘制该路径时，不显示任何图像。但是，当我删除否定符号时，显示以下SVG图像：

翻转SVG图像。有没有办法改变公式以获得正确的值？我需要清理SVG路径，这意味着用CSS翻转图像不是一种选择。

谢谢和问候。

Answer 1

如果没有看到您的实际 SVG 输出（在 SVG fileformat中），很难说问题出在哪里。它可能是错误的坐标转换，错误的编码。

1. SVG导出中显示无图像的最常见原因是错误或没有视口

   例如，这是我的 SVG 导出之一（ 2D 切片的玻璃网格剖面用作某些机械的输入）：

   <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
    <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
    <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
   </svg>
   

   

   特别注意第一行。并检查您的 SVG 是否拥有它。 viewBox属性选择显示空间的哪一部分，width,height是viewBox映射到的输出图像分辨率。您需要设置展位以保持宽高比。

2. 镜像x（翻转）很容易看到同样的例子

   <svg width="512" height="512" viewBox="-84.609371 -84.500872 461.177478 1568.45906" stroke-width="1.5px" stroke="black" fill="none" >
    <g transform="scale(-1.0,1.0) translate(+84.609371,0.0) translate(-461.177478,0.0)">
     <path stroke="blue" stroke-width="1px" d="M 285.581417 0.067317 l 6.4185 12.837 l -3.2093 1386.3928 l -0.000617 0.092881 l -288.79 -0.039845 "/>
     <path stroke="red" stroke-width="1px" d="M 285.581417 0.067317 l -38.5109 1222.7214 l -16.0462 22.4647 l -41.7202 16.0462 l -189.3453 0 "/>
    </g>
   </svg>
   

   

   正如您所看到的，我添加了带有变换的<g>标记来翻转整个内容而不更改path坐标。我使用scale和2x translate（可以使用一个，但我想显示值的来源）您也可以使用matrix。该比例只是反转x轴并转换图像，使其再次居中......

[Edit1]如果你想＆＃34;清洁＆＃34;路径中的点

然后你需要直接对它们应用变换，所以大写字母（如M,L）表示绝对值......所以对它们应用缩放和平移。小写字母表示相对值，因此仅适用于它们，你应该没问题。另一个选项是将此应用于要导出到 SVG 的输入多边形。