如何根据屏幕宽度/高度在 <body> 中居中 <svg>答案

【问题标题】：How do I center a <svg> in <body> based on screen width/height如何根据屏幕宽度/高度在 <body> 中居中 <svg>
【发布时间】：2013-07-02 19:27:22
【问题描述】：

我在这件事上做了一些research，但它似乎不起作用。

我希望能够创建一个包含整个浏览器屏幕的<svg> 容器（也就是除选项卡、工具栏等之外的所有内容）。

因此，如果您查看图片，我希望 <svg> 占据页面底部选项卡工具栏下方的所有内容（是视口还是窗口？）——也就是红色框中的所有内容。

这是我到目前为止的代码（只是<script />）：

<script>
function startThePage(){
  var height = $(document).height();
  var width  = $(document).width();

  var svgSelection = 
    d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  var myCircle = svgSelection
      .append("circle")
      .attr("cx", (width/2))
      .attr("cy", (height/2))
      .attr("r", 22)
      .style("fill", "lightgray")
      .style("stroke", "gray");

};
//alert(window.screen.availWidth);
//alert(window.screen.availHeight);

</script>

由于某种原因，这似乎使文档稍微变大，这意味着用户可以来回滚动（现在只有一个填充圆圈，我想居中）。这会使圆圈偏离中心。我该如何解决？

【问题讨论】：

我在一年前开始使用 D3 时遇到了同样的问题。我很确定您只需要从正文中删除边距和填充。那应该给你你想要的。
你应该接受一个答案。

标签： javascript jquery html css d3.js

【解决方案1】：

我认为box-sizing:border-box、margin:0;padding:0; 和overflow:hidden 应该几乎涵盖所有内容...

【讨论】：

【解决方案2】：

为了操纵圆，我认为你需要玩弄

.attr("cx", (width/2))
.attr("cy", (height/2))

值并尽可能将 cx 值提高到屏幕宽度的大约一半。然后您可以将 cy 值设置为大约 20 左右。希望对您有所帮助。

【讨论】：

【解决方案3】：

为了使您的圆在 x 轴上居中，您必须设置 margin-right:auto; 和 margin-left:auto; 这将使您的圆在 x 轴上居中。至于你的<svg>，请确保 html 和 body 元素具有以下属性：

html, body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

然后确保您的<svg> 具有以下属性：

svg {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

这应该使您的圆圈居中，并将<svg> 正确填充到整个屏幕。

【讨论】：