¿Cómo obtener ScrollBars en SVG?

Tengo un elemento SVG con muchos elementos dentro. El elemento SVG tiene una vista, por lo que puede presionar un botón de zoom y los elementos aparecen más grandes o más pequeños. Funciona bien. Ahora el problema es que cuando los elementos se desbordan, el elemento SVG principal no aparece ScrollBars.¿Cómo obtener ScrollBars en SVG?

Ejemplo:

<div width="100%" height="100%"> 
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122"> 
<g> 
... 
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line> 
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line> 
<text x="43.4516mm" y="52.9167mm" style="font-size: 11pt;">S</text> 
<rect x="0" width="210mm" y="0" height="297mm"></rect> 
... 
</g> 
</svg> 
</div>

//here I set the viewbox after clicking the zoomOut-Button 
float width = svg.getViewBox().getBaseVal().getWidth(); 
float height = svg.getViewBox().getBaseVal().getHeight(); 

svg.getViewBox().getBaseVal().setHeight((float) (height/0.9)); 
svg.getViewBox().getBaseVal().setWidth((float) (width/0.9));

Alguien me puede ayudar? Pongo el attribut overflow en svg y también en la etiqueta div. no funciona

Fuente

2011-12-01 snapple

No sé cómo acabé en esta página hace unos días, pero echar un vistazo: http: //www.carto .net/svg/gui/scrollbar/podría ser de ayuda – jValdron

conozco este ejemplo, pero crean su propia barra de desplazamiento con svg/js y no la barra de desplazamiento predeterminada html/css. – snapple

Parte del punto de SVG es que se puede escalar para adaptarse a la pantalla. Sin embargo, creo que si desea obtener algo como lo que está describiendo, debe establecer width y height explícitos en el elemento svg. Algo así como http://jsfiddle.net/qTFxJ/13/ donde establezco width y height en píxeles para que coincida con su tamaño viewBox.

Fuente

2011-12-01 19:15:02 ScottS

Gracias. Actualicé el código pero ahora no se ve mejor. Aquí está el código: http://jsfiddle.net/qTFxJ/17/. – snapple

No estoy seguro de lo que quieres decir con "no mejor". Veo barras de desplazamiento, que era lo que querías. No sé cuál es tu "apariencia" final. Observé que su ejemplo no tenía el ancho/alto del elemento svg establecido en los mismos números que viewBox como el mío. No sé si por eso el tuyo no se ve como lo esperas o no. – ScottS

Bien, bien, intento describir mi problema nuevamente. Ejemplo: http://jsfiddle.net/qTFxJ/18/ Tengo un elemento svg con un ancho y una altura fijos (400px). También tengo una vista para hacer que los elementos dentro del elemento svg sean más grandes o más pequeños. En este ejemplo, mi ancho/alto de rects es 400px y las coordenadas x/y son 40px. Entonces no puedes ver el rect completamente. Ahora quiero obtener la barra de desplazamiento en el elemento svg para ver el rect completamente. – snapple

Intenta hacer que el elemento SVG sea más grande que el div, y deja que el div maneje el desbordamiento usando scroll.

Por ejemplo, vea este jsfiddle, que utiliza el siguiente CSS:

div#container { 
    height: 400px; 
    width: 400px; 
    border:2px solid #000; 
    overflow: scroll; 
} 
svg#sky { 
    height: 100px; 
    width: 1100px; 
    border:1px dotted #ccc; 
    background-color: #ccc; 
}

Fuente

2012-07-12 09:38:47 Akhilesh

Estimado Akhilesh, [sería preferible] (http://meta.stackexchange.com/q/8259) incluir aquí las partes esenciales de la respuesta y proporcionar el enlace de referencia. – osyan

@Akhilesh usted hizo mi día !!! increíble –

¿Cómo obtener ScrollBars en SVG?

Respuesta

Cuestiones relacionadas