如何設置內聯SVG元素的確切大小？

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

在該代碼中創建一個SVG元素，並與該行設定的大小：在Chrome

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

測試代碼，一切正常，SVG具有所需的大小（960,500）。然而，當我在Firefox中打開這個站點時，根據實際的瀏覽器窗口大小，SVG元素以不同的大小創建，顯得很清楚。（634，856）。

enter image description here

如何解決這種行爲設置SVG到理想的固定尺寸爲Firefox？

我試了好東西，包括周圍包裹一個div和/或以下的想法，我在別處找到了

但我沒有找到一個方法來解決這個問題對於我的問題，工作:(

任何幫助將不勝感激！

來源

2015-05-07 ee2Dev

outerWidth和outerHeight是瀏覽器窗口的屬性。很奇怪的問題是，這些屬性可能會被Chrome覆蓋，但不會覆蓋Firefox（）。因此，當你設置

outerWidth = 960;

然後outerWidth在Chrome中更改爲960。在Firefox中，它是當前窗口寬度，不能由客戶端腳本更改。所以重命名outerWidth和outerHeight，它應該是工作。

svgWidth = 960; 
svgHeight = 500; 

... 

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

來源

2015-05-07 23:11:58 user3714582

不幸的是，重命名變量或甚至直接使用值（960,500）不會改變firefox中的行爲。 – ee2Dev

我錯了，你是對的！ Firefox中會覆蓋變量outerWidth和outerHeight。因爲我也使用了名字innerWidth和innerHeight，所以我沒有注意到當我做了你所建議的更改。這同樣適用。非常感謝！！ – ee2Dev

如何設置內聯SVG元素的確切大小？

回答

相關問題