El objetivo es tener la <svg> elemento ampliar el tamaño de su contenedor primario, en este caso un <div>, no importa cuán grande o pequeño que el contenedor puede ser.

El código:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

La solución más común a este problema parece ser la configuración de la viewBox atributo en el <svg> elemento.

viewBox="0 0 widthOfContainer heightOfContainer"

Sin embargo, esto no parece funcionar en los casos donde los elementos dentro de la <svg> elemento predefinido anchos y/o de las alturas. Por ejemplo, el <rect> elemento, en el código anterior, tiene su anchura y la altura se establece explícitamente.

Así que la solución obvia es el uso de % anchos y % de alturas en los elementos. Pero, ¿esto tiene que ser hecho? Especialmente, desde <img src=test.svg > funciona bien y se expande/contrae sin ningún tipo de problemas con establecer explícitamente <rect> alturas y anchuras.

Si elementos como <rect>, y otros elementos, como ella, tienen que tener sus anchuras y alturas definidas en porcentajes, hay una manera en Inkscape para configurar de manera que todos los elementos con el <svg> documento porcentaje de uso de la anchos, alturas, etc.. en lugar de dimensiones fijas?

InformationsquelleAutor user782860 | 2012-01-18

5 Comentarios

  1. 49

    La viewBox no está a la altura del contenedor, es el tamaño de su dibujo. Definir su viewBox a ser de 100 unidades de ancho, a continuación, definir su rect a ser de 10 unidades. Después de eso, sin embargo a gran escala la SVG, el rect será del 10% del ancho de la imagen.

    • Pero la pregunta es: ¿Cómo escala el SVG?
    • La escala sucede automáticamente cuando se establece un tamaño en el SVG objeto, como ya se ha hecho en el código de la pregunta. he Aquí una versión fija de ejemplo.
    • Tienes razón, gran, que realmente funciona para mí. Supongo que mi problema era que las propiedades height y width en mi svg elemento raíz.
    • he hecho algunos ajustes menores para que el violín para hacer que el tamaño de ser forzado en horizontal y en vertical sin necesidad de preservar la relación de aspecto, y funciona en IE, mientras que el violín @robertc presentado no estaba. Espero que va a ayudar a alguien por el camino!
    • Por defecto, su svg escala tan grande como sea posible de modo que es completamente visible, pero conserva la relación de aspecto (para una plaza de viewBox no llenar completamente rectangular de los padres). Si realmente quieres a la fuerza para cubrir completamente el contenedor primario, agregar preserveAspectRatio=»none» a el elemento SVG.
    • Esta información es de utilidad. El viewbox unidad es una unidad relativa. En mi caso he tenido un cuadrado viewbox de 0 0 6.82666 6.82666 así que me puse a la altura y la anchura de atributo para 6.82666, de 100% en el <svg> elemento, a través de CSS. Parece que funciona.
    • Hola Robert, estaría interesado en un pequeño SVG trabajo de consultoría? Sólo necesitamos ayuda para entender SVG detalles como este para que podamos centrarnos en las características del producto: stackoverflow.com/questions/54001972/…

  2. 22

    Supongamos que tengo un SVG que se parece a esto:
    Cómo hacer un <svg> elemento expandir o contraer a su contenedor primario?

    Y quiero ponerlo en un div y hacer que se llene el div con receptividad. Mi forma de hacerlo es como sigue:

    Primero que me abra el archivo pdf en una aplicación como inkscape. En Archivo->Propiedades de Documento debo configurar el ancho del documento a 800px y y la altura a 600px (usted puede elegir otros tamaños). Entonces me ajuste el SVG en este documento.

    Cómo hacer un <svg> elemento expandir o contraer a su contenedor primario?

    A continuación, guardar este archivo como un nuevo archivo SVG y obtener la ruta de acceso de datos de este archivo.
    Ahora en HTML el código que hace la magia es como sigue:

    <div id="containerId">    
        <svg
        id="svgId" 
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        x="0"
        y="0"
        width="100%"
        height="100%"
        viewBox="0 0 800 600"
        preserveAspectRatio="none">
           <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
        </svg>
    </div>

    Nota que la anchura y la altura de SVG están configurados al 100%, ya que queremos que se llene el recipiente de forma vertical y horizontal ,pero la anchura y la altura de la viewBox son los mismos que la anchura y la altura del documento de inkscape que es 800px X 600px. La siguiente cosa que usted necesita hacer es ajustar el preserveAspectRatio a «ninguno». Si necesita más información sobre este atributo he aquí una buena enlace. Y eso es todo allí está a él.

    Una cosa más es que este código funciona en casi todos los principales navegadores, incluso los antiguos, pero en algunas versiones de android y ios que usted necesita para utilizar algunos javascrip/código jQuery para mantener la coherencia. Yo uso el siguiente en el documento listo y cambiar el tamaño de funciones:

    $('#svgId').css({
        'width': $('#containerId').width() + 'px',
        'height': $('#containerId').height() + 'px'
    });

    Espero que ayude!

    • +1 para el preserveAspectRatio nota. Después de la caza de alta y baja para obtener un SVG realmente tramo (no a escala) de un div, esta era la respuesta correcta.
    • Gracias por esta maravillosa respuesta. tiene preguntas sobre el mismo. ¿Qué pasa si mi svg es anidada. por ejemplo, <svg> <svg id=»1″></svg> <svg id=»2″></svg> </svg> quiero mostrar svg 1 y 2 de forma condicional y debe tomar la anchura y la altura del recipiente. <div id=»container» style=»width:200px;height:200px;»></div> puede usted por favor me ayude a salir de esta.
    • Baradaran: Genio.
  3. 4

    Lo que ha trabajado para mí recientemente es eliminar todos los height="" y width="" atributos de la <svg> de la etiqueta y de todos los niños y etiquetas. A continuación, puede utilizar el escalado utilizando un porcentaje del contenedor primario de la altura o la anchura.

    • Puede usted dar un ejemplo de trabajo? Yo no puedo conseguir que esto de hacer nada.
  4. 2

    @robertc tiene el derecho, pero también es necesario notar que svg, #container hace que el svg para ampliarse de forma exponencial por nada pero el 100% (de una vez por #container y de una vez por svg).

    En otras palabras, si he aplicado el 50% de h/w a ambos elementos, es en realidad el 50% de 50%, o .5 * .5, lo que equivale a .25, o el 25% de la escala.

    Un selector funciona bien cuando se utiliza como @robertc sugiere.

    svg {
      width:50%;
      height:50%;
    }
    • Eso es porque su selector de svg, #container coincide con por tanto el svg elemento dom y el #container elemento dom. Creo que fueron en lugar buscando svg #container, pero la especificación de los padres no es necesario si usted está usando un ID de todos modos.
    • ¿No es eso exactamente lo que me dijo, «de una vez por #contenedor y una vez svg»?
    • Oh, perdón, tienes razón, pero tu respuesta es un poco extraño redactado conduce a la incomprensión. Suena como si usted está hablando acerca de un potencial peligro en el primer tiempo.

Dejar respuesta

Please enter your comment!
Please enter your name here