SVG在Internet Explorer 9中绘制超出画布边界

Question

我正在使用Raphael Javascript库在网页上进行一些基本绘图。我只是画了一些从一个点辐射出来的线条。在Chrome、Firefox和Opera中，这些线条受到SVG画布大小的限制。这是期望的行为，因为我想画出任意长度的光线，但不希望它影响页面的大小。如果我画一个5000像素宽的框，只有画布内部的部分会被显示。

然而，Internet Explorer（毫不奇怪）完全忽略画布的大小和边界，适应任何被绘制的内容。因此，如果我从0,0开始画一个5000像素宽的框，但画布是50像素乘以50像素，并从20,20开始，你仍然会看到一个在0,0处宽度为5000像素的框，并且页面将在底部出现滚动条，以便您可以横向滚动查看整个图像。我不想发生这种情况。

如何让Internet Explorer在这方面像其他浏览器一样？我不希望页面能够滚动查看由Raphael绘制的其他部分图像，我希望边缘被文档的自然大小裁剪。

---

我已经在这个新闻组线程中愚蠢地回答了自己的问题：http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed 只需将以下内容添加到您的CSS中：

svg { overflow: hidden; }

- Christopher Knowl

---

请问您能否将您最后的评论作为答案添加并标记为已接受，这样可以将您的问题移出未回答列表，我会在那里查找未回答的问题。请注意：我的翻译尽量保证忠实于原文，但有时可能需要进行调整以确保翻译更易于理解。 - David Waters

这个问题和解决方案对于IE 11仍然有效。 - Rick-Rainer Ludwig

Answer 1

（从作者更新复制，以将问题标记为“已回答”）

只需将以下内容添加到您的 CSS 中即可：

svg { overflow: hidden; }

- robermorales

Answer 2

我不想让它在溢出中消失，所以我需要两个东西。max-width和height。

注意：使用width和max-height是不起作用的。

- mvndaai