如何设置内联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元素的确切大小？

回答

相关问题