javascript - 当我将 SVG 转换为 Raphael JS 对象时，路径不显示

Question

我在网上找到了这个我想与 Raphael 一起使用的 SVG 文件，所以我着手获取路径的 d 属性并将它们放入一个 JS 对象中。在代码中，我循环遍历 JS 对象并创建 Raphael 路径。当我在浏览器中打开文件时，没有任何显示，我也不知道为什么。

我认为它与 SVG 文件有关。在我下载的 SVG 文件中，每个组(g 标签)都有一个 transform 属性。如果我从 g 标记中删除该属性并在浏览器中打开 SVG 文件，则该组不会显示。所以看起来当我只是复制路径时，某些东西丢失了。

我不确定如何让这些路径与 raphael 一起显示，有什么建议吗？

资源:

• > my files
• > original map

Answer 1

路径可能会“显示”，但在您定义的视口(viewport)之外。您将需要调整路径坐标以适应您的视口(viewport)，例如通过应用变换(您可以这样做 with raphaël ，但确保路径坐标正确变换开始会更有效)。

如果您想查看路径的位置，您可以随时增加坐标空间，例如 setting the viewBox大的东西，例如 [x,y,w,h] = [-10000,-10000,50000,50000]。这可能会使渲染效果显得很小，但您应该能够快速找出缺失路径的位置。