html - manipulation - SVG EN LÍNEA receptivo: el contenido de svg debe llenar el ancho del padre

svg web

Question

GOL:

Estoy tratando de obtener un elemento INLINE SVG para llenar el ancho completo disponible del elemento principal. Puedo lograr el mismo efecto fácilmente usando una etiqueta img y object para hacer referencia al archivo svg, pero quiero usar inline svg porque estoy animando los elementos internos svg con javascript.

PROBLEMA:

Puedo lograr esto en Firefox y con algunos ajustes también en Chrome, pero Safari e IE9 e IE10 no jugarán.

• El contenido interno de svg no siempre llena el elemento svg en todos los anchos de pantalla
• webkit agrega un relleno / altura misteriosa (en este ejemplo, el relleno está dentro del elemento svg) La altura del elemento SVG debe ser automática y envolver el contenido svg interno.

PREGUNTA PRINCIPAL:

¿Existe una solución de navegador cruzada para SVG EN LÍNEA receptivo: vea el ejemplo en IE9 y 10 y -webkit-Safari y observe la altura adicional no requerida dentro del elemento SVG (color cian).

http://jsfiddle.net/David_Knowles/9tUAd/

<div class="block">stuff</div> 
<div class="wrap">
    <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet">

        <rect x="0" y="0" width="550" height="350"/>
        <polyline points="0,0 0,350 550,350"/>
        <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">The text</text>
    </svg>
</div>
<div class="block">stuff</div> 

Answer 1

El primer problema es que está configurando su .svg-wrap al 100% de altura. 100% de qué? En este caso, el elemento padre de ese div es el elemento del cuerpo. Cuando tienes contenido a nivel de bloque que es el 100% de la altura del cuerpo y otros elementos de flujo, siempre tendrás una barra de desplazamiento vertical. porque siempre tendrás contenido de 100% + tus elementos .stuff . Solo como un consejo general, un desbordamiento constante como este debería ser el indicio de que algo no funciona en tu CSS.

Continuando más adentro del DOM, la declaración del 100% de altura en tu elemento svg está forzando a la svg a expandirse al contenedor excesivamente alto. Y esa es otra parte del culpable.

La solución que uso implica relaciones intrínsecas . CSS como este:

.svg-wrap {
    background-color:red;
    height:0;
    padding-top:63.63%; /* 350px/550px */
    position: relative;
}

svg {
    background-color: cyan;
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

http://jsfiddle.net/pcEjd/

Probado en los últimos, FF, Chrome, Safari, (aunque no IE).

Las desventajas de este enfoque son que:

a) debe precalcular las proporciones para todos sus cuadros, o escribir un script que lo haga. No está mal.

b) no puede usar border-box global con el selector de estrella, o si lo hace, debe anular el tamaño de caja de regreso a content-box para sus contenedores de svg. Realizable.

Como nota al margen, obviamente esto no es cómo se supone que funcionan las cosas. Los navegadores deben ser lo suficientemente inteligentes como para mirar el atributo viewBox de SVG para obtener las proporciones, calcular el ancho computado (después de cualquier límite de maxWidth) y luego calcular la altura.

Pero actualmente no funciona de esa manera. Hay otro error extraño en Chrome donde agregar max-width:100% a la svg crea una situación en la que el svg siempre se ajusta al tamaño más pequeño. Intenta cargar este violín en Chrome:

http://jsfiddle.net/ynmey/1/

¡No verás ningún SVG en absoluto! Extraño. Aún más raro, alternar la declaración de max-width en Dev Tools, y luego comenzar a jugar con el ancho de la ventana de visualización "result" en jsfiddle. Tómelo ligeramente más estrecho, luego más ancho, luego más angosto, luego más ancho. ¡Tenga en cuenta que una vez que la svg es empujada más pequeña, no vuelve a cambiar el tamaño de la copia de seguridad cuando la ventana gráfica se hace más grande!

Esto es importante tener en cuenta porque:

 * {max-width:100%}

es un enfoque de diseño receptivo común (y totalmente legítimo), y actualmente causa estragos con SVG en Blink. Así que mantente en relaciones intrínsecas por ahora.

Answer 2

El tipo de visualización predeterminado para los elementos SVG en línea es display: inline; . Esto significa que el elemento SVG se coloca en la línea base tipográfica de su elemento primario y se alinea en consecuencia. Siempre hay un espacio debajo de la línea de base para permitir los bits colgantes de caracteres como g y j y tal.

svg { display: block;} fácil: svg { display: block;} o svg { display: inline-block; vertical-align: top; } svg { display: inline-block; vertical-align: top; } svg { display: inline-block; vertical-align: top; } .

Answer 3

Logré lograr resultados consistentes en los navegadores Webkit / Gecko estableciendo un valor de height que no sea auto o 0 . En mi ejemplo, uso 1% , pero por lo que puedo decir, podría ser cualquier cosa. De alguna manera, esto resuelve la altura incorrecta en Webkit (de mis pruebas, creo que el auto establece incorrectamente la altura de SVG al 100% altura de la ventana).

No he probado esto en IE todavía. Por favor, déjeme saber si funciona.

http://jsfiddle.net/yXeru/

Answer 4

No estoy del todo seguro del efecto que intentas lograr, pero creo que podrías estar buscando preserveAspectRatio = "xMinYMin slice"