SVG 在 Internet Explorer 9 中绘制画布边界之外
我正在使用 Raphael Javascript 库为网页做一些基本的绘图。我只是画一些从一个点向外辐射的线。在 Chrome、Firefox 和 Opera 中，这些线条取决于 SVG 画布的大小。这是期望的行为，因为我想绘制一条射线，只要我想要，但我不希望它影响页面的大小。如果我画一个 5000px 宽的盒子，只有画布内的部分是可见的。
然而，Internet Explorer（令人惊讶）完全忽略画布的大小和边界并适应所绘制的任何内容。因此，如果我从 0, 0 开始绘制一个 5000px 宽的框，但画布为 50px x 50px，从 20, 20 开始，您仍然会在 0, 0 处看到一个 5000px 宽的框，并且页面将有一个滚动条位于底部，以便您可以横向滚动以查看整个内容。我不希望这种情况发生。
我怎样才能让 Internet Explorer 在这方面表现得像其他浏览器一样？我不希望页面能够滚动以查看拉斐尔绘制的图像的其他部分，我希望边缘被文档的自然大小剪切。
我用这个新闻组主题愚蠢地回答了我自己的问题：http://groups.google .com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed
只需将其添加到您的 CSS 中：
svg { overflow: hidden; }
I am using the Raphael Javascript library to do some rudimentary drawing for a web page. I am just drawing some lines that radiate out from a point. In Chrome, Firefox, and Opera, these lines are subject to the size of the SVG canvas. This is the desired behaviour, because I want to draw a ray as long as I want but I do not want it to affect the size of the page. If I draw a 5000px wide box, only the part inside the canvas will be visible.
However, Internet Explorer (surprise surprise) completely ignores the size and bounds of the canvas and accommodates whatever is drawn. So if I draw a 5000px wide box starting at 0, 0, but the canvas is 50px by 50px and starts at 20, 20, you'll still see a box at 0, 0 that's 5000px wide, and the page will have a scrollbar at the bottom so you can scroll sideways to view the entire thing. I do not want this to happen.
How can I get Internet explorer to behave like the other browsers in this respect? I do not want the page to be able to scroll to view the other parts of the image drawn by Raphael, I want the edges to be clipped by the natural size of the document.
I have stupidly answered my own question with this newsgroup thread: http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed
Simply add this to your CSS:
svg { overflow: hidden; }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
（从作者更新中复制，以便将问题标记为“已解答”）
只需将其添加到您的 CSS 中：
(Copy from the author update, in order to mark the question as "answered")
Simply add this to your CSS:
我不希望它在溢出中消失，所以我需要两件事。
最大宽度和高度。注意：使用
width和max-height不起作用。I didn't want it disappearing in overflow, so I needed two things.
max-widthandheight.Note: Using
widthandmax-heightdidn't work.