如何设置内联SVG元素的确切大小？

Question

I am creating a visualization with d3.js:

http://bl.ocks.org/EE2dev/raw/cd904f10097b9921f1cc/

In that code I create an SVG element and set the size with this line:

var chart = d3.select("body")
  .append("div").attr("class", "chart")
  .append("svg")
  .attr("width", outerWidth) // outerWidth = 960
  .attr("height", outerHeight) // outerHeight = 500
  .append("g")
  .attr("class", "margin")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Testing the code in Chrome, everything works fine, the SVG has the desired size of (960, 500). When I open this site in Firefox, however, the SVG element is created with a different size, appearantly depending on the actual browser window size, eg (634, 856) in the case below.

How do I fix this behaviour to set the SVG to the desired fixed size for Firefox?

I tried several things, including wrapping a div around and/or following ideas I found elsewhere

• SVG only shown partially in Firefox
• http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

But I didn't find a way to fix this problem for me that worked:(

Any help would be greatly appreciated!

Answer 1

outerWidth and outerHeight are browsers Window properties. It is curious problem that these properties could be overwritten in Chrome but not in Firefox ( FF API ). So when you set

outerWidth = 960;

then outerWidth is changed to 960 in Chrome. In the case of Firefox it is current window width and it can not be changed by the client script. So rename outerWidth and outerHeight and it should be working.

svgWidth = 960;
svgHeight = 500;

...

.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)