svg - Wrong SVGSVGElement width in Firefox

Question

On th following document:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">

<svg width = "100%"
 height = "100%"
 id="pic"
 version="1.1"
 style="background-color:blue"
 xml:space="preserve"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:ev="http://www.w3.org/2001/xml-events"
 xmlns:xlink="http://www.w3.org/1999/xlink">

</svg>

I'm trying to get the width value of the root SVGSVGElement:

document.getElementById ("pic").width.baseVal.value

Chromium says: 969

Firefox says: 1

Sure value maybe a little implementation dependent, but (what indeed must be independent) when i try to get a converted value:

var w = evt.target.width.baseVal;
w.convertToSpecifiedUnits (5);
alert(w.valueInSpecifiedUnits);

chrome gives again 969, but Firefox' answer is 1.

I need this value to adjust some elements in my scripts, but they don't work in Firefox. How can i obtain the real value of width?

Answer 1

2 years later this is still an issue..

I found a temporary solution:

var style = window.getComputedStyle(svg,null);
var svgWidth = style.getPropertyValue("width").slice(0, -2);  // "1240px" -> "1240"

but in my case this is very expensive and the browser gets super slow.. so, has anyone got a better solution?

I also tried to convert "the magic 1" into a pixel width following this article: https://developer.mozilla.org/en/docs/Web/API/SVGLength but no luck either..