Quero obter o valor em pixels de um elemento svg que esta definido em %. Tenho o seguinte exemplo, mas devolve m o valor 0.
2 Respostas
O segredo é o getBoundingClientRect()
. Ele retorna a informação desejada há algum tempo. Funciona em todos os navegadores que não são muito antigos.
document.body.innerHTML += document.getElementById('rect').getBoundingClientRect().width;
<svg width=100% height=100%>
<rect id=rect rx=0 ry=0 x=0 y=0 width=100% height=50px fill=HoneyDew />
</svg>
Podes usar o .getBoundingClientRect()
que retorna um objecto com as dimensões do elemento.
Neste teu exemplo seria:
{
height: 50,
width: 813,
left: 8,
bottom: 58,
right: 821,
top: 8
}
Exemplo:
var el = document.getElementById('rect');
var width_plan = el.getBoundingClientRect().width
alert(width_plan); // 821
jsFiddle: http://jsfiddle.net/hxen50jq/