如何设置内联 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 元素被创建为不同的大小，表面上取决于实际的浏览器 window 大小，例如(634, 856) 在下面的例子中。

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

我尝试了几件事，包括按照我在其他地方找到的想法div 围绕 and/or 包装

SVG only shown partially in 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中将outerWidth改为960。在 Firefox 的情况下，它是当前的 window 宽度并且不能被客户端脚本更改。所以重命名 outerWidth 和 outerHeight 它应该可以工作了。

svgWidth = 960;
svgHeight = 500;

...

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

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

How to set the exact size of an inline SVG element?

html

javascript

firefox

svg

d3.js