Viewport y ViewBox de SVG

El viewport (viewport) y el viewbox (zona de visualización) de la imagen SVG pueden establecer el tamaño de la parte visible de la imagen.

La diferencia entre viewport y viewbox

1、viewport viewport, equivalente a la pantalla del monitor.

2、viewbox zona de visualización, equivalente a recortar un小块 de la pantalla en la pantalla completa, es el efecto de acercamiento.

3、preserveAspectRatio especifica el alineamiento y la escala de viewbox con viewport.

Viewport (viewport)

El viewport (viewport) es la región visible de la imagen SVG. Lógicamente, la imagen SVG puede ser tan ancha y alta como desee, pero solo se puede ver una parte específica de la imagen a la vez. La región visible se llama viewport (viewport).

Puede usar las propiedades width y height del elemento para especificar el tamaño del viewport (viewport) del elemento <svg>. Aquí hay un ejemplo:

<svg ancho="500" height="300"></svg>

El viewport (viewport) definido en este ejemplo es500 unidad de ancho y300 unidad de altura.

Unidad del sistema de coordenadas

Si no especifica ninguna unidad en las propiedades width y height, se asume que la unidad es píxeles. Es decir, width500 representa500 píxeles.

Si prefiere usar una unidad diferente a los píxeles, puede hacerlo. A continuación, se muestra una lista de unidades que se pueden usar junto con el elemento <svg>:

La unidad establecida en el elemento <svg> solo afecta al tamaño del elemento <svg> (viewport de visualización). El tamaño de las formas SVG mostradas en la imagen SVG se determina por la unidad establecida en cada forma. Si no se especifica una unidad, la unidad se establece por defecto en píxeles.

Este es un ejemplo que muestra un <svg> con un conjunto de unidades que contiene formas con sus propios conjuntos de unidades:}}

<svg ancho="10cm"　height="10cm">
　　　　<rect　x="50"　y="100"　width="50" altura="50"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"/>
　　　　<rect　x="100"　y="100"　width="50mm"　height="50mm"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"　/>
</svg>

La imagen <svg> tiene su configuración de unidades en cm. Los elementos <rect> tienen sus propios conjuntos de unidades. Uno es en píxeles (sin configurar unidades explícitamente) y otro en mm para el width y height.

Esta es la imagen generada. Note que la caja de la derecha (con unidades de width y height en mm) es más grande que la de la izquierda.

Ventana de vista (ViewBox)

Puede redefinir el significado de las coordenadas sin unidades dentro del elemento <svg>. Puede hacerlo utilizando el atributo viewBox. Aquí hay un ejemplo:

<svg ancho="500" height="200"　viewBox="0　0　50　20"　>
　　　　<rect　x="20"　y="10"　width="10"　height="5"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

En este ejemplo, se crea un <svg> de anchura500 píxeles, alto de200. La propiedad viewBox del <svg> contiene cuatro coordenadas. Estas coordenadas definen la ventana de vista del elemento <svg>. Las coordenadas son x y width height. La ventana de vista (ViewBox).

En este caso, el ViewBox (ventana de vista) comienza en 0,0 y50 ancho y20 alto. Es decir,500 x 200 píxeles. El elemento <svg> utiliza el sistema de coordenadas desde 0,0 hasta50,20. En otras palabras, cada uno de los puntos de coordenadas internos de la forma se utiliza1unidad(es) <svg> corresponden a la anchura500/50 = 10píxeles, y la altura corresponde a200/20 = 10píxeles. Por eso, la posición x es20, la posición y de10la razón por la que el rectángulo realmente está ubicado200,100, y su anchura (10）y la altura (5）se corresponden con100 píxeles y50 píxeles.

Otra forma de interpretar es que las dos primeras coordenadas del atributo viewBox en <svg> definen la esquina superior izquierda del coordinate system del usuario del elemento, y las dos últimas coordenadas definen la esquina inferior derecha. El espacio dentro de <svg> se interpreta como desde la esquina superior izquierda al esquina inferior derecha del ViewBox (ventana de vista).

Efecto de la imagen después de ejecutar:

Por favor, note cómo se interpretan todas las coordenadas internas del elemento <rect>.1unidad(es)10píxeles.

Mantener la proporción de aspecto

Si la proporción de aspecto (proporción ancho/alto) de la ventana de vista (Viewport) y el cuadro de vista (ViewBox) es diferente,则需要指定SVG查看器（例如浏览器）如何显示SVG图像。您可以使用元素的preserveAspectRatio属性来执行此操作<svg<。

La propiedad preserveAspectRatio utiliza dos valores separados por espacio. El primer valor indica cómo alinear el cuadro de vista (ViewBox) dentro del viewport. Este valor en sí mismo se compone de dos partes. El segundo valor indica cómo mantener la proporción de anchura y altura (si la hay).

El primer valor que especifica el modo de alineación se compone de dos partes. La primera parte especifica el modo de alineación x, y la segunda parte especifica el modo de alineación y. Aquí hay una lista de valores de alineación x y y:

Al agregar el componente y después del componente x, se puede combinar el componente x y el componente y en un valor. Aquí hay dos ejemplos:

xMaxYMax
xMidYMid

Estos dos ejemplos hacen que el cuadro de vista (ViewBox) y el viewport se alineen de manera diferente. El primer ejemplo alinea el borde derecho del cuadro de vista con el borde derecho del viewport. El segundo ejemplo alinea el centro del cuadro de vista con el centro del viewport.

La segunda parte del valor de la propiedad preserveAspectRatio puede adoptar tres valores diferentes:

La segunda parte del valor de la propiedad preserveAspectRatio se agrega a la primera parte y se separa por espacio. Aquí hay dos ejemplos:

preserveAspectRatio="xMidYMid　meet"
preserveAspectRatio="xMinYMin　slice"

Todavía no he hablado realmente sobre los efectos de diferentes configuraciones de preserveAspectRatio, así que vamos a ver algunos ejemplos.

Todos los siguientes ejemplos configuran width como500, configure height para que sea75，configure el atributo viewBox como 0 0 250 75píxeles. Esto significa que a lo largo del eje x, cada unidad de coordenada se corresponderá a2píxeles, pero a lo largo del eje y, cada unidad de coordenada solo corresponderá a1píxeles. Como puede ver, la proporción de alto y ancho en el eje x es500/250 = 2，la proporción de alto y ancho en el eje y es75/75 = 1Esto puede causar distorsión en la imagen, pero en los siguientes ejemplos, veremos cómo diferentes configuraciones de preserveAspectRatio manejan estos ajustes.

Este es el primer ejemplo con preserveAspectRatio configurado como xMinYMin meet. Esto asegura que se mantenga la proporción de ancho y alto, y se ajuste el tamaño de la cuadrícula de visualización (ViewBox) para que se ajuste a la cuadrícula de visualización (Viewport). Es decir, según las dos proporciones de alto y ancho (la proporción del eje y es1）Ajuste el tamaño de la cuadrícula de visualización (ViewBox) a la menor. Debido al componente xMinYMin, la cuadrícula de visualización (ViewBox) se ubicará en la esquina superior izquierda de la cuadrícula de visualización (Viewport). Esto es el código y la imagen generada:

<svg ancho="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px sólido #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" altura="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

El segundo ejemplo tiene configurado preserveAspectRatio como xMinYMin slice. Esto permite mantener la proporción de ancho y alto, pero según la proporción de ancho y alto mayor (la proporción del eje x es2）Ajuste el tamaño de la cuadrícula de visualización (ViewBox), lo que hace que la imagen sea demasiado grande para caber en la cuadrícula de visualización (Viewport). La imagen se llama "rebanada".

<svg ancho="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px sólido #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" altura="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

El tercer ejemplo tiene configurado preserveAspectRatio como none. Esto significa que la cuadrícula de visualización (ViewBox) llenará toda la cuadrícula de visualización (Viewport), haciendo que la imagen se distorsione porque las proporciones de ancho y alto no son las mismas en el eje x y y.

<svg ancho="500" height="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　style="border:　1px sólido #cccccc;">
　　　　　<rect　x="1"　y="1"　width="50" altura="50"
　　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Alineación de la cuadrícula de visualización (ViewBox)

Hasta ahora, todos los ejemplos que se han mostrado han utilizado la configuración xMinYMin. Según cómo desee alinear la cuadrícula de visualización (Viewport) con la cuadrícula de visualización (ViewBox), se pueden utilizar otras configuraciones. Vamos a entender más profundamente cómo funcionan estas configuraciones, pero primero veamos un ejemplo:

<svg ancho="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px sólido #cccccc;">　　　　
<circle cx="25"cy="25"r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg ancho="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMidYMin meet"　　　　
style="border:　1px sólido #cccccc;">　　　　
<circle cx="25"cy="25"r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg ancho="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMaxYMin meet"　　　　
style="border:　1px sólido #cccccc;">　　　　
<circle cx="25"cy="25"r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>

Este ejemplo muestra un <svg> con el grupo de componentes width500 y height establecido en100. viewBox establecido en 0 0 50 50. Esto causará que el ratio de aspecto del eje x sea500/50 = 10，el ratio de aspecto del eje y es100/50 =2。El radio del círculo en la imagen es25，haciendo que su ancho50 grados de ancho, alto50 unidades. Por lo tanto, llenará toda la vista del cuadro de vista (ViewBox) (no el viewport (Viewport)).

Al usar el símbolo meet, el cuadro de vista (ViewBox) se escalará según el eje y, ya que su ratio de aspecto es más pequeño. Esto significa que el cuadro de vista (ViewBox) llenará todo el viewport (Viewport) en el eje y (verticalmente), pero solo en el eje x (horizontalmente)2 * 50 píxeles = 100 píxeles (ratio de aspecto*Tamaño X del cuadro de vista (ViewBox) ). Debido al ancho del viewport (Viewport) de500 píxeles, por lo que debe especificar cómo alinear horizontalmente el cuadro de vista (ViewBox) dentro del viewport (Viewport). Esto se hace usando xMin, xMid y xMax en la primera parte de la subpropiedad preserveAspectRatio.

Aquí hay tres imágenes que representan el uso de xMinYMin meet, xMidYmin meet y xMaxYmin meet en la propiedad preserveAspectRatio. Nota cómo se alinea con el lado izquierdo, central y derecho (dependiendo de la configuración).

Del mismo modo, si el ratio de aspecto de la imagen en el eje x es menor que el eje y, debe especificar su alineamiento y.

Este es un ejemplo anterior, pero ahora tiene width100 y height200：

El tamaño del cuadro de vista (ViewBox) es el mismo, por lo que el ratio de aspecto en el eje y (200/50 = 4）es mayor que el ratio de aspecto en el eje x (100/50 = 2）。Por lo tanto, el cuadro de vista (ViewBox) se llenará en la dirección del eje x en lugar del eje y. Esto hace que sea necesario especificar el alineamiento y del cuadro de vista (ViewBox).

<svg ancho="100" altura="200" viewbox="0 0　50　50" preservaraspectratio="xMinYMin meet" style="border:　1px sólido #cccccc;">
　　　　<circle cx="25"cy="25"r="25"estilo="trazo: #000000; relleno:none;"></circle>
</svg>
<svg ancho="100" altura="200" viewbox="0 0　50　50" preservaraspectratio="xMinYMid meet" style="border:　1px sólido #cccccc;">
　　　　<circle cx="25"cy="25"r="25"estilo="trazo: #000000; relleno:none;"></circle>
</svg>
<svg ancho="100" altura="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMax meet" estilo="borde:　1px sólido #cccccc;">
　　　　<circle cx="25"cy="25"r="25"estilo="trazo: #000000; relleno:none;"></circle>
</svg>

Estas son tres imágenes, cada una muestra una posible alineación YMin, YMid y YMax utilizando un valor de subparte: