让 RaphaelJS SVG 填充整个容器

Question

我想让我页面的全尺寸 SVG 响应。这意味着：100% 的宽度和高度应该调整。 The converter I used 显然路径不正确，因为即使我这样做了：

rsr.setViewBox(0, 0, 2560, 1440, true); //or 1920 and 1080
rsr.setSize("100%", "100%");

里面的实际内容没有调整大小。调整了 SVG 的大小和调整了 ViewBox 的大小，但调整了内容的 none 大小。在不更改我的 SVG 文件中的实际路径的情况下，我将如何使其响应？例子可以在这里看到：

Answer 1

viewBox 的目的是告诉 broswer/SVG 渲染器内容的边界是什么。这就是它如何知道缩放内容以适合您的视口的正确数量。

我不确定你从哪里得到 2560x1440，但显然它与你的 SVG（地图）的内容不匹配。解决方法是找到正确的值。有多种方法可以做到这一点。有时您可能不得不反复试验（如@RobertLongson 所说）。

在你的情况下，你已经有了合适的值。在你的 fiddle 中你有：

var rsr = Raphael('container', '959', '593');

这是将 SVG 设置为 959x593 的固定宽度。

要使其响应，您只需将其更改为

var rsr = Raphael('container', '100%', '100%');
rsr.setViewBox(0, 0, 959, 593);

Make RaphaelJS SVG fill out entire container