将 SVG 限制为 div 边界答案

【问题标题】：Restrict SVG to div boundaries将 SVG 限制为 div 边界
【发布时间】：2011-03-08 18:35:44
【问题描述】：

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

有没有什么方法可以让 SVG 像普通图像一样在浏览器窗口大小发生变化时自动缩放并防止 SVG 被绘制到 div 边界之外（就像行为一样）？

干杯，最大

【问题讨论】：

标签： javascript html svg raphael

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：