如何根据屏幕宽度/高度将<svg>置于</svg>中心

Question

我就此事做了一些research，但似乎没有起作用。

我希望能够创建一个包含浏览器整个屏幕的<svg>容器（也就是所有不是制表符，工具栏等等）。

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

这是我到目前为止的代码（只是<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>

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

Answer 1

我认为box-sizing:border-box，margin:0;padding:0;和overflow:hidden应涵盖的主要内容......

Answer 2

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

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

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

Answer 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>正确地填充到整个屏幕。