Este artículo presenta principalmente el uso de los atributos de ViewBox cuando se utilizan imágenes SVG en HTML5, incluido algún contenido relacionado con el diseño receptivo. Los amigos que lo necesitan pueden referirse a él para comprender rápidamente los parámetros de ViewBox
El atributo ViewBox se utiliza para especificar el origen y el tamaño del sistema de coordenadas de la imagen SVG del usuario. Todo el contenido dibujado en SVG se realiza en relación con este sistema de coordenadas. Debido a que el lienzo SVG se extiende infinitamente en todas las direcciones, incluso puede dibujar gráficos fuera de los límites de este sistema de coordenadas; Pero estos gráficos posicionados en relación con la ventana SVG también pueden controlarse por la posición del sistema de coordenadas del usuario.
La propiedad ViewBox utiliza cuatro parámetros para especificar la ubicación del origen del sistema de coordenadas y su tamaño: altura de ancho xy. En el caso inicial, este sistema de coordenadas es equivalente al sistema de coordenadas de ventana inicializada (determinado por el ancho y la altura de la imagen SVG), y su origen está en (0, 0), es decir, la esquina superior izquierda del SVG.
Al cambiar los valores de los dos parámetros x e y, se puede ajustar la posición del origen. Cambie los valores de ancho y altura para cambiar el tamaño del sistema de coordenadas. Simplemente use el atributo ViewBox para ayudarlo a expandir o recortar el lienzo SVG. Lea con el ejemplo.
IMPORTANTE: En este artículo, no cambiaré el comportamiento predeterminado (escala y posición) de ViewBox dentro de la ventana SVG. Porque, de acuerdo con el comportamiento predeterminado del atributo, el contenido del cuadro de vista se incluirá lo más completamente posible en la ventana y luego se colocará en el centro. Sin embargo, el uso de la propiedad PreserveaSpectratio le permite cambiar libremente el tamaño y la posición del cuadro de vista, pero en este artículo, esta no es una técnica necesaria, por lo que tampoco lo explicaremos en profundidad aquí.
Use Viewbox para recortar SVG, es decir, use el atributo de ViewBox para crear un SVG de dirección de arte
Hace un tiempo, uno de mis clientes pidió establecer el avatar SVG de su sitio web en diferentes tamaños de acuerdo con diferentes tamaños de pantalla, de modo que solo una pequeña parte de ella es visible en una pantalla pequeña, se puede ver una parte más grande en un tamaño de pantalla media y luego el contenido completo se puede ver en una pantalla grande. La primera idea que me vino a la mente en ese momento fue que su requisito era usar el atributo ViewBox para recortar la imagen SVG, y luego mostrar una cierta parte de la imagen que quería ver en base a diferentes tamaños de pantalla.
Al cambiar el tamaño y el origen del sistema de coordenadas SVG, podemos recortar el SVG y mostrar la parte del contenido que queremos mostrar en la ventana.
Veamos cómo implementarlo.
Supongamos que tenemos esta imagen SVG completa de la siguiente manera, y luego queremos recortarla al tamaño de una pantalla pequeña. Esta imagen es un vector de la casa de uso gratuito diseñado por Freepik, que tiene licencia bajo el Acuerdo Creative Commons Attribution 3.0 Unported. Para simplificar, primero supongamos que la imagen se trata de lo que se debe recortar para mostrar en pantallas pequeñas y medianas, y el contenido completo que se muestra en la pantalla grande, como se muestra a continuación.
La imagen de la izquierda es la imagen completa que recortaremos usando la propiedad ViewBox, y la imagen a la derecha es el área que queremos mostrar en la pantalla pequeña.
Ahora, recorte el SVG cambiando el valor de la propiedad ViewBox. Hay algunas cosas que deben considerarse, hablaremos de ellas más tarde. Pero primero, necesitamos cambiar el sistema de coordenadas para que coincida con el contenido del área del rectángulo de la caja virtual en la imagen de arriba. , al ajustar el origen del sistema y los valores de ancho y altura, podemos cambiar su valor inicial de parámetros 0 0 800 800.
Pero, ¿cómo sabemos las nuevas coordenadas y las nuevas dimensiones? El punto no es pasar por muchos experimentos y errores repetidos.
Hay varias formas. Dado que ya estamos en el editor de gráficos (mi ejemplo usa IA), podemos usar el panel del editor para obtener la posición y las dimensiones de los elementos.
Dibujo esta caja rectangular punteada, además de representar lo que quiero mostrar en la pantalla pequeña, otra razón es que podemos obtener la posición y las dimensiones del rectángulo y usarlos como el valor del cuadro de vista. Usando el panel de transformación de AI (en la foto a continuación), obtuvimos los valores que necesitábamos. Al seleccionar el rectángulo y hacer clic en el enlace de transformación en la esquina superior derecha, obtenemos el panel que se muestra en la figura a continuación, incluidos los valores de X, Y, ancho y altura que necesitamos.
El panel de transformación en esta IA se puede usar para obtener la posición y el tamaño del rectángulo seleccionado.
Es posible que haya notado que el valor anterior no es un entero, por lo que necesitamos modificarlo manualmente. Según la información anterior, cambiamos el valor de ViewBox a 0 200 512 512.
Debido a que la relación de aspecto del nuevo ViewBox es la misma que la de la ventana SVG (ambas cuadradas), el contenido en el cuadro de vista se ampliará y solo se mostrará el área seleccionada en la ventana. Después de cambiar el valor de ViewBox, el resultado es como se muestra en la figura:
SVG recién recortado. Solo la ubicación donde especificamos que la propiedad ViewBox es visible en la ventana. El borde azul indica la ventana del SVG.
En este punto, hay un problema que debe resolverse:
¿Qué pasa si la relación de aspecto del área recortada (es decir, ViewBox) es la relación de aspecto de la ventana SVG?
En este caso, habrá un desbordamiento significativo. El desbordamiento obvio, quiero decir, no una extensión más allá del límite de la ventana SVG, sino un desbordamiento en relación con el nuevo sistema de coordenadas de usuario definido por ViewBox. La siguiente figura proporciona explicaciones correspondientes.
Si la relación de aspecto de ViewBox es diferente de la relación de aspecto de ViewBox, el contenido en el SVG desborde el sistema de coordenadas del usuario, y el resultado puede ser así.
El borde negro representa el nuevo sistema de coordenadas de usuario, y el borde azul es la ventana SVG.
El borde negro en la imagen correcta de arriba es el área definida por el cuadro de vista. De acuerdo con el comportamiento predeterminado de ViewBox en la ventana, se centrará y ampliará tanto como sea posible para garantizar que su contenido esté incluido en la ventana (borde azul).
Debido a que el lienzo SVG conceptualmente se extiende infinitamente en todas las direcciones, puede dibujar gráficos fuera de los límites del sistema de coordenadas del usuario, y el contenido se desbordará directamente, como se muestra en la figura anterior.
Si cambia la relación de aspecto de la ventana SVG (el ancho y la altura del SVG) para que se adapten a la relación de aspecto del cuadro de vista, no verá desbordamiento porque el zoom del cuadro de vista se adapta a la ventana, como en el ejemplo anterior.
Sin embargo, en algunos casos, es posible que no desee o no desee cambiar la relación de aspecto del SVG en absoluto. Por ejemplo, si está utilizando SVG Sprite como un conjunto de imágenes para mostrar imágenes en la página. En la mayoría de los casos, una imagen tiene una relación de aspecto fija, y no desea cambiar el tamaño de la imagen, solo para adaptarse al contenido de una pequeña imagen dentro de ella. O tal vez ha incrustado un sistema de iconos y desea que todos los íconos sigan siendo del mismo tamaño al mismo tiempo.
Para cortar el exceso (por ejemplo, algunos otros iconos en Sprite se muestran en la ventana), puede usar <Clippath> para cortar el exceso. La ruta de recorte puede ser un elemento <rect> que cubre todo el área de ViewBox y luego aplicar ese elemento a la raíz SVG.
Sin embargo, hay otra cosa que recordar: asegúrese de que las propiedades X e Y de <Rect> sean consistentes con ViewBox, a menos que RECT se coloque relativamente en el origen del sistema original/inicializado, entonces el contenido del SVG que se recorta también es incierto.
CODE CODE CSS Copiar contenido al portapapeles