preserveaspectratio - svg responsive

Recortar para ajustar un patrón svg

Question

Tengo patrones que cada uno tiene una sola imagen en ellos. Necesito que las imágenes se amplíen al ancho o al alto de sus contenedores, que son caminos, mientras que conservan sus proporciones. Esencialmente, deben comportarse como lo haría una imagen html si establece min-width:100%; min-height:100%; min-width:100%; min-height:100%;

No he usado svgs mucho antes y no sé qué atributos cambiar para obtener este tipo de comportamiento. He estado probando todo tipo de combinaciones de viewBox , preserveAspectRatio , patternUnits y más, pero parece que no puedo obtener lo que quiero.

Answer 1

Para que esto funcione, debe comprender cómo objectBoundingBox unidades objectBoundingBox en SVG y también cómo funciona preserveAspectRatio .

Unidades de caja delimitadora de objetos

El tamaño y contenido de los gradientes, patrones y una serie de otras características de SVG se pueden especificar en términos del tamaño del objeto ( path , rect , circle ) que se está pintando especificando objectBoundingBox como la unidad. Lo contrario es siempre userSpaceOnUse , que utiliza el sistema de coordenadas en el que se dibuja la forma.

Las unidades del cuadro delimitador de objetos suelen ser el valor predeterminado para declarar el tamaño y la posición del elemento de relleno gráfico; cambia esto configurando la propiedad patternUnits en el elemento <pattern> . Sin embargo, las unidades de espacio de usuario suelen ser las predeterminadas para cualquier unidad utilizada en los gráficos de contenido ; para cambiar esto, establezca la propiedad patternContentUnits .

Entonces, primer paso: para crear un patrón que llene completamente la forma , debe:

• Declare la altura y el ancho del patrón como 100% (o 1); estos se interpretarán por defecto en relación con el cuadro delimitador).
• Declare patternContentUnits="objectBoundingBox" .
• Tamaño del contenido (su imagen) para que tenga una altura y un ancho de 1.

No puede usar el 100% como sinónimo para 1 unidad de cuadro delimitador de objetos dentro del contenido del patrón (es decir, las dimensiones de la imagen); los porcentajes se interpretan en relación con el tamaño de SVG , no con objectBoundingBox. *

Debería mencionar, ya que usted dice que sus formas son elementos <path> , que el cuadro delimitador de objetos es el rectángulo más pequeño que es perpendicular al sistema de coordenadas en el que se dibuja la ruta y contiene todos los puntos de la ruta. No incluye accidente cerebrovascular. Por ejemplo, una línea recta horizontal tiene un cuadro delimitador de altura cero; una línea en ángulo tiene un rectángulo de cuadro delimitador tal que la línea es la diagonal del cuadro. Si sus rutas tienen una forma torpe y / o no están muy bien alineadas con el sistema de coordenadas, el cuadro delimitador puede ser mucho más grande que la ruta.

Preservando la relación de aspecto

La propiedad preserveAspectRatio aplica a las imágenes y a cualquier elemento que pueda tener una propiedad viewBox : el <svg> principal, el <svg> anidado, el <symbol> , el <marker> y el <pattern> . Para las imágenes, la relación de aspecto se calcula a partir de la relación de ancho: altura inherente de la imagen, para todas las demás se calcula a partir de los números de anchura: altura en el atributo viewBox .

Para cualquier tipo de elemento, si declara una altura o anchura para el elemento que no coincide con la relación de aspecto, la propiedad preserveAspectRatio determina si el contenido se estirará para ajustarse ( none ), se ajustará para ajustarse a una dimensión y se recortará en el otro ( slice ) o encogido para ajustar ambas dimensiones con espacio adicional ( meet ); para las opciones de meet y slice , también especifica cómo alinear el contenido en el espacio.

Sin embargo, es importante tener en cuenta que la relación de aspecto del espacio disponible se calcula en el sistema de coordenadas actual, no en píxeles de la pantalla . Entonces, si un viewBox o una transformación de nivel superior ha alterado la relación de aspecto, las cosas aún pueden distorsionarse incluso con una propiedad preserveAspectRatio establecida en el elemento actual.

La otra cosa a saber es que el valor predeterminado generalmente no es none . Para los elementos <image> y <pattern> , el valor predeterminado es xMidYMid meet , es decir, reducir para ajustar y centrar. Por supuesto, este valor predeterminado solo tiene un impacto en los elementos del patrón si el elemento del patrón tiene una propiedad viewBox (de lo contrario, se supone que no tiene relación de aspecto para preservar).

El valor que desea utilizar para preserveAspectRatio dependerá de la imagen y el diseño:

• ¿Se debe estirar la imagen para que se ajuste a la forma preserveAspectRatio="none" ?
• ¿Debe mantenerse la relación de aspecto de la imagen, pero ajustarse para que se ajuste completamente o cubra la forma?

En el primer caso (estiramiento), no necesita hacer nada al elemento <pattern> (sin viewBox significa que no hay control de relación de aspecto), pero sí necesita desactivar específicamente el control de relación de aspecto en la imagen.

Por el contrario, si desea evitar la distorsión de la imagen, deberá:

• Establezca las propiedades viewBox y preserveAspectRatio en el elemento <pattern> ;
• Establezca la propiedad preserveAspectRatio en la <image> si desea algo diferente a la predeterminada.

Ejemplo de trabajo

Este violín muestra tres formas de obtener una imagen de patrón para rellenar una forma .

• La fila superior tiene el control de aspecto desactivado.

  <!-- pattern1 - no aspect ratio control -->
  <pattern id="pattern1" height="100%" width="100%"
           patternContentUnits="objectBoundingBox">
      <image height="1" width="1" preserveAspectRatio="none" 
             xlink:href="/*url*/" />
  </pattern>

• La fila del medio tiene un control de relación de aspecto en el elemento <image> , por lo que la imagen se recorta para ajustarse al patrón, pero la imagen aún está distorsionada cuando el patrón se dibuja en el rectángulo porque las unidades objectBoundingBox que definen el sistema de coordenadas son diferentes para la altura contra ancho. (La imagen en el círculo no está distorsionada porque el cuadro delimitador del círculo es un cuadrado).

  <!-- pattern2 - aspect ratio control on the image only -->
  <pattern id="pattern2" height="100%" width="100%"
           patternContentUnits="objectBoundingBox">
      <image height="1" width="1" preserveAspectRatio="xMidYMid slice" 
             xlink:href="/*url*/" />
  </pattern>

• La fila inferior tiene preserveAspectRatio establecido tanto en la imagen como en el patrón (y también un viewBox establecido en el patrón). La imagen se recorta pero no se estira.

  <!-- pattern3 - aspect ratio control on both image and pattern -->
  <pattern id="pattern3" height="100%" width="100%"
           patternContentUnits="objectBoundingBox" 
           viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
      <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
             xlink:href="/*url*/" />
  </pattern>

Imagen de origen por Stefan Krause, de Wikimedia Commons . La relación de aspecto original es el modo de retrato 4: 6.

* Corrección el 2015-04-03