Calculate the size of an SVG element in an HTML page.

Question

How can I request the size (in pixels) the SVG element occupies on the main page?

• Both svg.offsetWidthand svg.getBoundingClientRect().widthwork in Chrome v34.
• None of them work correctly in Firefox v29. (The former is empty, the latter returns invalid values.)

Testing page: http://jsfiddle.net/dL5pZ/3/

The motivation for this question is to get a reliable implementation for this answer , which requires knowledge of the aspect ratio of the outer part of the element. Also, for this question, I need to know the actual size of the SVG, or at least what returns proportional values ​​for different calls and the resize element.

Answer 1

I used to be on this path. Unfortunately, most functions for getting the size of an element <svg>do not work in Firefox. The only working solution I found is to use window.getComputedStyle(svgElement).width(or height), which needs to be parsed (and also works only with svgElement.display == 'block', which is in your example). I accepted your script to work in Firefox: http://jsfiddle.net/dL5pZ/5/

Update: The 'inline' display issue was fixed some time ago around Firefox 29.

2: , getBoundingClientRect .

Answer 2

, 2 , .

, Chrome Opera, IE, preserveAspectRatio="xMinYMin slice", Firefox .

-, : a) SVG - Ch, O, IE b) getComputedStyle:

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

, , 60 , c) , ,

<div><svg style="width:100%; height:100%"></svg></div>

SVG 1 Firefox.. , div, ! , IE.

, :

if(!svg.width.baseVal.value || svg.width.baseVal.value < 2){
  //this is the FF case
  if(!this.parentElement) return;
  this.width = this.parentElement.clientWidth;
  this.height = this.parentNode.clientHeight;
}
else{
  //this works for Ch,O,IE
  this.width = svg.width.baseVal.value;
  this.height = svg.height.baseVal.value
}

Answer 3

getBoundingClientRect Firefox 33 , . . 530985.

Answer 4

:

var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
    widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];

var svgCalculateSize = function (el) {

    var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
        bounds = {
            width: 0,
            height: 0
        };

    heightComponents.forEach(function (css) { 
        bounds.height += parseFloat(gCS[css]);
    });
    widthComponents.forEach(function (css) {
        bounds.width += parseFloat(gCS[css]);
    });
    return bounds;
};

jsFiddle: http://jsfiddle.net/dL5pZ/7/

Answer 5

:

var svgWidth = svg.clientWidth || window.getComputedStyle(svg).width.slice(0, -2),
    svgHeight = svg.clientHeight || window.getComputedStyle(svg).height.slice(0, -2);

clientWidth clientHeight 0 Firefox.

d3:

var svg = d3.select('#yoursvg')[0][0],
    svgWidth = svg.clientWidth || window.getComputedStyle(svg).width.slice(0, -2),
    svgHeight = svg.clientHeight || window.getComputedStyle(svg).height.slice(0, -2);

, .