如何設置內聯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)