viewBox es un atributo del elemento SVG en HTML. Se usa para escalar el elemento SVG, lo que significa que podemos establecer las coordenadas, así como el ancho y la altura.
Sintaxis:
viewBox = "min-x min-y width height"
Valores de atributos:
- min-x: Se utiliza para establecer el eje horizontal. Se utiliza para hacer que el SVG se mueva en un eje horizontal (es decir, izquierda y derecha).
- min-y: Se utiliza para establecer el eje vertical. Se utiliza para hacer que el SVG se mueva en un eje vertical (es decir, arriba y abajo).
- ancho: se utiliza para establecer el ancho de viewbox.
- altura: Se utiliza para establecer la altura de viewbox.
Nota: La letra ‘B’ es mayúscula en el viewBox.
Entonces, con la ayuda de estos valores, podemos escalar el vector SVG y cambiar su dirección (es decir, hacerlo a la izquierda, derecha, arriba o abajo) según el valor definido en la propiedad de ancho y alto en el elemento SVG.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<!-- Without viewBox -->
<svg width="200" height="200">
<circle cx="50" cy="50" r="45"
stroke="#000" stroke-width="3"
fill="none"/>
</svg>
<!-- With viewBox -->
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Aquí, el cuadro cuadrado muestra el borde del SVG y con el atributo viewBox podemos establecer la escala y la panorámica del vector. La salida para los dos elementos SVG anteriores es la misma. Establecemos el ancho y la altura para SVG y viewBox iguales (es decir, 200) para obtener ambos círculos del mismo tamaño.
Valores de ancho y alto: Con los valores de ancho y alto puedes cambiar el tamaño del vector SVG. Entonces, si queremos cambiar el tamaño y hacerlo más grande, establezca el valor de ancho y alto, en viewBox, más pequeño que las propiedades de ancho y alto del elemento SVG.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Entonces, ahora, para cambiar el tamaño del vector SVG y hacerlo más pequeño, debemos establecer el valor de ancho y alto en el cuadro de vista, más grande que las propiedades de ancho y alto del elemento SVG.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 0 300 300">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Movimiento a la izquierda: establezca el valor de x-min con un número positivo. Moverá el SVG en el lado izquierdo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="50 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Movimiento a la derecha: establezca el valor de x-min con un número negativo. Moverá el SVG hacia el lado derecho.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="-50 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Top Move: establece el valor de y-min en un número positivo. Moverá el SVG en la parte superior.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 50 100 100">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Movimiento inferior: establece el valor de y-min con un número negativo. Moverá el SVG en la parte inferior.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>SVG viewBox Attribute</title>
<style type="text/css">
svg {
border: 1px solid #aaa;
}
</style>
</head>
<body>
<svg width="200" height="200" viewBox="0 -50 100 100">
<circle cx="50" cy="50" r="45" stroke="#000"
stroke-width="3" fill="none"/>
</svg>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aakashpawar1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA