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

ee2Dev 发表于 Dev

ee2Dev

我正在使用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包裹起来和/或遵循在其他地方找到的想法

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

任何帮助将不胜感激！

用户名

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

outerWidth = 960;

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

svgWidth = 960;
svgHeight = 500;

...

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-21

我来说两句

0条评论

登录后参与评论

上一篇：HttpClient并使用代理-不断获得407

来自分类Dev