将SVG限制为div边界

Question

我正在尝试使用Raphael在div上显示多个多边形作为SVG图像。虽然，我已经设置了拉斐尔作为创建纸质对象的参数的大小，但div元素的大小不受尊重，图像被绘制在div边界之外（我在某种程度上理解，因为多边形坐标超出div边界。）

有没有办法让SVG的行为像普通图像一样，一旦浏览器窗口大小改变就会自动缩放，并阻止SVG被绘制到div边界之外（如行为）？

干杯， 最大

Answer 1

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

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

我只使用Firefox和Chrome进行过测试，但似乎没问题。

Answer 2

似乎有两个问题合二为一。

对于“使用浏览器窗口自动缩放，如图像”，您可以查看此示例的代码，它可以完成工作：

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

Answer 3

将div的overflow样式设置为溢出：auto或overflow：hidden。 div的默认值是overflow：visible，这使得SVG在div之外出血。但是，如果你想让整个SVG“缩小”以便你可以看到整个东西，你需要在画布上缩放和翻译每个Raphael元素（即缩放）。我已经完成了滚动和缩放，但很明显，滚动更容易。