Métodos JavaScript para SVG
El método getBBox()
El método getBBox() devuelve el tamaño y las coordenadas de la caja delimitadora ( bounding box ) de un elemento o un grupo de elementos SVG. Devuelve un objeto SVGRect con este aspecto:
SVGRect {
height: 198.15249633789062
width: 208.07460021972656
x: 10.05737590789795
y: 17.5419979095459
}
donde height representa la altura de la caja delimitadora, y width representa la anchura; x e y representan las coordenadas de la esquina izquierda arriba de la caja. Probablemente este es el método que más utilizo para depuración en SVG.
En el siguiente ejemplo estoy utilizando el método getBBox() para dibujar un rectángulo rojo alrededor de mi gato.
See the Pen SVG element.getBBox()****** by Gabi (@enxaneta) on CodePen.
El método getTotalLength()
El método getTotalLength() devuelve el valor calculado de la longitud total de un trazado SVG.
En el siguiente ejemplo utilizo la longitud total del trazado #flor para crear una animación donde un lápiz invisible dibuja una flor. Si mira el código CSS puede ver dos propiedades cuyo valor es de 1318.824. Este valor representa la longitud total del trazado conseguido utilizando el método getTotalLength();
stroke-dasharray:1318.824;
stroke-dashoffset:1318.824;
¿De donde lo he sacado? Si mira el JavaScript verá esto:
console.log(flor.getTotalLength());
Lea más acerca de cómo animar trazados SVG Crear un sencillo loader SVG
Haz click para reanudar la animación.
See the Pen SVG método getTotalLength**** by Gabi (@enxaneta) on CodePen.
El método getPointAtLength()
El método getPointAtLength() devuelve las coordenadas x e y de un punto en el trazado situado a una longitud dada.
En el siguiente ejemplo utilizo un slider para desplazar un punto (circulo #deslizador) siguiendo el trazado #flor. Para calcular la posición del punto en el trazado utilizo el método getPointAtLength().
See the Pen SVG método getPointAtLength() by Gabi (@enxaneta) on CodePen.