SVG在Internet Explorer 9中绘制画布边界 [英] SVG draws outside canvas boundary in Internet Explorer 9

问题描述

我使用Raphael JavaScript库为网页做一些基本的绘图。我只是画一些线从一个点辐射出来。在Chrome，Firefox和Opera中，这些行符合SVG canvas的大小。这是所需的行为，因为我想要绘制一个射线，只要我想，但我不希望它影响页面的大小。如果我绘制一个5000px宽的框，只有画布内的部分将可见。

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.

但是，Internet Explorer（惊喜惊喜）完全忽略了画布的大小和边界并适应任何绘制。因此，如果我从0,0开始绘制一个5000像素宽的框，但是画布是50px x 50像素，从20,20开始，你仍然会看到一个在0,0处的框，宽度为5000px，页面将有一个滚动条在底部，这样你可以侧向滚动来查看整个事情。我不希望这种情况发生。

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.

我如何获得Internet Explorer的行为像其他浏览器在这方面？我不想让页面能够滚动来查看由Raphael绘制的图像的其他部分，我想要的边缘被文件的自然大小裁剪。

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.

我用这个新闻组话题愚蠢地回答了我自己的问题： http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed

I have stupidly answered my own question with this newsgroup thread: http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed

只需将其添加到CSS：

Simply add this to your CSS:

svg { overflow: hidden; }

推荐答案

将问题标记为已回答）

只需将其添加到CSS：

Simply add this to your CSS:

svg { overflow: hidden; }

这篇关于SVG在Internet Explorer 9中绘制画布边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！