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

Question

我正在使用d3.js创建可视化文件：

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

在该代码中，我创建了一个SVG元素，并使用以下行设置了大小：

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 + ")");

在Chrome中测试代码，一切正常，SVG具有所需的大小（960，500）。 但是，当我在Firefox中打开此网站时，SVG元素的创建大小不同，显然取决于实际的浏览器窗口大小，例如，在以下情况下为（634，856）。

如何解决此问题，将SVG设置为Firefox所需的固定大小？

我尝试了几件事，包括将div包裹起来和/或遵循在其他地方找到的想法

• SVG仅在Firefox中部分显示
• http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

但是我没有找到一种可行的方法来解决这个问题:(

任何帮助将不胜感激！

Answer 1

outerWidth和outerHeight是浏览器的Window属性。 奇怪的是，这些属性可能会在Chrome中被覆盖，而在Firefox（ FF API ）中不会被覆盖。 所以当你设定

outerWidth = 960;

然后在Chrome中将externalWidth更改为960。 在Firefox中，它是当前窗口宽度，不能由客户端脚本更改。 因此，重命名outerWidth和outerHeight ，它应该可以正常工作。

svgWidth = 960;
svgHeight = 500;

...

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