让 RaphaelJS SVG 填满整个容器

Posted 2023-03-28

【中文标题】让 RaphaelJS SVG 填满整个容器

【英文标题】：Make RaphaelJS SVG fill out entire container

【发布时间】：2018-04-22 06:45:22

【问题描述】：

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

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

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

https://jsfiddle.net/Lmvpq7a3/

【问题讨论】：

似乎对我有反应，即当我调整浏览器大小时，绘图会变小。

但一开始并不是 100% 宽度。

在我看来是这样。如果这就是你的意思，它会溢出 viewBox。

@RobertLongson 也许您的屏幕分辨率没有我的那么高，而且您看起来还不错。听起来就是这样。即使它溢出，这仍然不是意图。相信我，它不是 100% 的宽度或高度。

罗伯特知道他在说什么。他说的是对的。这不是一个需要任何拉斐尔知识的问题。小心张贴粗鲁或侮辱性的 cmets。你不知道罗伯特是否是拉斐尔专家。如果您不了解 viewBox 的工作原理，您可以随时阅读网络上的众多教程之一。或阅读SVG specification。

【参考方案1】：

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

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

在您的情况下，您已经有了合适的值。在你的小提琴中，你有：

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

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

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

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

https://jsfiddle.net/Lmvpq7a3/2/

【讨论】：

啊，太好了，你每天都能学到新东西！非常感谢，保罗。所以基本上由于我的 SVG 的 ViewBox 具有固定大小，我需要将该大小设置为 Raphael 容器的 ViewBox，所以 SVG 与大小匹配？太棒了。

我不确定我是否理解您的措辞。如果您希望缩放 SVG 的内容以适合您的视口（您正在绘制 SVG 的页面区域）。然后你需要让浏览器知道你对绘图的哪个部分感兴趣。如果你给它错误的viewBox坐标，那么SVG的错误部分就会显示出来。

对，这是有道理的。我想我现在明白了。谢谢！