如何使用 Raphael JS 创建自动调整大小的 SVG 路径？答案

【问题标题】：How to create an autosize SVG path with Raphael JS?如何使用 Raphael JS 创建自动调整大小的 SVG 路径？
【发布时间】：2011-12-31 12:26:21
【问题描述】：

我不明白 Raphael 或 SVG 的工作方式。

我想使用 SVG 和 Raphael 创建一张德国地图。我有每个行政区域和创作作品的路径，但结果有自己的大小。

我的意思是，如果我告诉 Raphael 是 300x300px 并添加一些路径，那么路径生成的对象会更大。

代码：

var paper = new Raphael(document.getElementById('svnInnerGroup'), 300, 300);
paper.path('...');

结果：我得到一个 300x300 像素的 SVG 图形（这很好），左上角是德国（这不好）。我希望德国地图适合给定的大小。

可能是我不明白这个概念，希望你能帮助我。

谢谢！

【问题讨论】：

标签： svg raphael

【解决方案1】：

好的，我发现我的错误了！这样的 SVG 图形总是需要一个“viewbox”，它定义了文档的开始和结束。当我从任何文件复制任何路径时，我也需要复制并使用视图框。

这是您可以使用 raphael 设置视图框的方法：

paper.canvas.setAttribute("viewBox", "0 0 591 800");

谢谢！

【讨论】：