Obteniendo las medidas de un SVG con JavaScript

Parece que cada vez que abro Google Canary algo relacionado con SVG pasa a estar deprecated.

En la próxima version de Chrome y Opera se va a pasar a deprecated el método SVGElement.offset el cual he utilizado en alguna ocasión para obtener las medidas de un SVG. Así que vamos a ver otro método alternativo para obtener todas las medidas de un SVG.

En la misma página de Chromestatus nos recomiendan que utilicemos getBoundingClientRect para obtener las medidas de un SVG. Así que vamos a ponernos con ello.

Para este ejemplo he utilizado mi logo en formato SVG.

Vamos a crear un archivo JavaScript. Ahora vamos a guardar en una variable el SVG, al cúal he asignado un id="logo"

var logo = document.getElementById("logo");

Ahora vamos a utilizar el método getBoundingClientRect para obtener las medidas.

var logoDimensiones = logo.getBoundingClientRect();

Y ahora vamos a ir obteniendo sus dimensiones y su posición en el HTML.

Para obtener el ancho y el alto utilizamos el height y el width

var alturaLogo = logoDimensiones.height;
var anchuraLogo = logoDimensiones.width;

Para obtener su posición vamos a utilizar top, bottom, left y ```right``

var topLogo = logoDimensiones.top;
var rightLogo = logoDimensiones.right;
var bottomLogo = logoDimensiones.bottom;
var leftLogo = logoDimensiones.left;

DEMO!

El código como siempre en GitHub