polyfiller - SVG dibuja el límite del lienzo exterior en Internet Explorer 9

polyfill js io

Question

Estoy usando la biblioteca de Raphael Javascript para hacer un dibujo rudimentario para una página web. Solo estoy dibujando algunas líneas que irradian desde un punto. En Chrome, Firefox y Opera, estas líneas están sujetas al tamaño del lienzo SVG. Este es el comportamiento deseado, porque quiero dibujar un rayo todo el tiempo que quiera, pero no quiero que afecte el tamaño de la página. Si dibujo un cuadro de 5000px de ancho, solo será visible la parte dentro del lienzo.

Sin embargo, Internet Explorer (sorpresa sorpresa) ignora completamente el tamaño y los límites del lienzo y se adapta a lo que se dibuja. Entonces, si dibujo un cuadro de 5000px de ancho desde 0, 0, pero el lienzo es de 50px por 50px y comienza por 20, 20, aún verás un cuadro de 0, 0 que tiene un ancho de 5000px, y la página tendrá una barra de desplazamiento en la parte inferior para que pueda desplazarse hacia los lados para ver todo. No quiero que esto suceda.

¿Cómo puedo lograr que Internet Explorer se comporte como los otros navegadores a este respecto? No quiero que la página pueda desplazarse para ver las otras partes de la imagen dibujada por Rafael, quiero que los bordes queden recortados por el tamaño natural del documento.

He respondido estúpidamente mi propia pregunta con este hilo de grupo de noticias: http://groups.google.com/group/raphaeljs/browse_thread/thread/43c71ec89a6a01ed

Simplemente agregue esto a su CSS:

svg { overflow: hidden; }

Answer 1

(Copia de la actualización del autor, para marcar la pregunta como "respondida")

Simplemente agregue esto a su CSS:

svg { overflow: hidden; }

Answer 2

No quería que desapareciera en el desbordamiento, así que necesitaba dos cosas. max-width y height .

Nota: Usar width y max-height no funcionó.