javascript - 将 SVG 限制为 div 边界

Question

我正在尝试使用 Raphael 在 div 上将多个多边形显示为 SVG 图像。虽然，我已经设置了 div Raphael 获取的大小作为创建纸张对象的参数，但不尊重 div 元素的大小，并且图像被绘制在 div 边界之外（我以某种方式理解，因为多边形坐标超出 div 边界）。

有没有办法让 SVG 表现得像一个普通图像，一旦浏览器窗口大小发生变化就会自动缩放并防止 SVG 被绘制到 div 边界之外（就像行为一样）？

干杯，马克斯

Answer 1

好像有2个问题合二为一。

对于“像图像一样使用浏览器窗口自动缩放”的事情，你可以看看这个例子的代码，它完成了这项工作：

http://www.irunmywebsite.com/raphael/scaleraphael.php

Answer 2

要使 Raphael 的元素填充包含元素（听起来像您想要的），请使用：

var paper = Raphael("someElement", "100%", "100%");

我只用 Firefox 和 Chrome 对其进行了测试，但似乎可以正常工作。

Answer 3

将 div 的溢出样式设置为溢出：自动或溢出：隐藏。div 的默认值是溢出：可见，这使得 SVG 在 div 之外溢出。但是，如果您希望整个 SVG “缩小”以便可以看到整个内容，则需要缩放和平移画布上的每个 Raphael 元素（即缩放）。我已经完成了滚动和缩放，但显然滚动要容易得多。