Desbordamiento: visible en SVG

¿Es posible establecer overflow: visible en elementos <svg>?Desbordamiento: visible en SVG

This simple example on jsfiddle interrupciones en cada navegador al que tengo acceso, (algunas versiones de Chrome y Firefox) ya que actúan como overflow: hidden.

¿Alguien puede decirme si el soporte de svg es simplemente demasiado inmaduro para hacer cosas tan simples, o si estoy haciendo algo mal en mi código?

Mi uso práctico de overflow: visible es un eje de rango en un gráfico, donde la mitad inferior de la marca -0 se corta.

Fuente

2012-09-08 Thomas Ahle

Parece que no. Véase también http://stackoverflow.com/q/10077264/165673 – Yarin

obras de ejemplo anteriores (al menos en 53 google chrome) –

Supongo que quiere decir en línea < svg> elementos en HTML, en caso afirmativo, esto es solo una limitación de implementación. IE9 + permite overflow:visible en < svg> elementos, pero hasta el momento los otros navegadores no son AFAIK.

Una solución posible (que es realmente cómo debe hacerse en primer lugar en mi humilde opinión) es especificar un viewBox que define el sistema de coordenadas dentro de la svg. Luego dibujas cosas dentro de este sistema de coordenadas. Si las cosas se recortan (o en otras palabras, si los elementos están fuera del área viewBox), entonces simplemente aumente el ancho y/o altura de viewBox en consecuencia.

Si usted se pregunta acerca de un buen valor por defecto para su viewBox en particular, tratar [0 0 width height] (donde la anchura y la altura es el tamaño de su SVG tiene por el momento), entonces simplemente aumentar la altura hasta que la garrapata fondo es totalmente visible.

2014 actualización: Es todavía un poco incoherente en los navegadores, pero se está haciendo allí. Firefox e IE soportan overflow:visible en elementos svg en línea, y Blink (Opera 23/Chrome 36) también lo agrega, para más detalles, vea bugreport.

Fuente

2012-09-08 13:15:56

Si configuro un viewBox, mis elementos svg se escalan para caber dentro del elemento principal svg. Todavía no se desbordan. Simplemente haciendo que el svg sea más grande para adaptarse a las cosas que quiero desbordar, se romperá el diseño html. –

Tal vez lo que realmente necesitaba saber es si webkit admite esto, si el estándar lo especifica, y si estoy en lo cierto, ese webkit solía soportarlo. –

Ah, ya veo lo que quieres decir ahora. No, tendrás que solucionar la falta de soporte para 'overflow: visible' aumentando la ventana gráfica (también conocido como el tamaño de svg). –

overflow: visible 
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/

Añadiendo una gran sombra de caja al SVG, o agregando el SVG en un DIV con la gran sombra que lo resuelve. En Chrome noté que el desbordamiento está siendo recortado al límite de la sombra de caja.

Fuente

2017-06-19 08:28:17

Desbordamiento: visible en SVG

Respuesta

Cuestiones relacionadas