使SVG覆盖整个视口（响应），并在视口中垂直和水平居中SVG组对象

我正在尝试配置SVG以响应地覆盖整个视口。我已经能够使用css和svg属性来实现这一点，但是这种方法很难实现我的第二个需求。在SVG中，我希望将对象水平/垂直居中

--编辑--

---

我不太确定这是否是您需要的：

到目前为止您得到了什么？您可以使用

viewBox

属性在用户单元中找到SVG画布的中心。然后使用

getBBox（）

获得要居中的对象的大小。最后，将对象平移所需的量，以使两个中心重合。或者，您可以重新计算对象的坐标，而不是平移。如果您需要更多帮助，请添加一些代码。您好，enxaneta，可能我遗漏了一些内容，但viewbox无法获取百分比，因此我无法定义响应性强且占用整个视口的viewbox。当我定义viewbox=“0 100 100”时，它会创建一个正方形。我不知道用户的视口尺寸。视图框是关于SVG内部的内容，高度和宽度是其外部尺寸。@RobertLongson是的，这是正确的。

 <svg 
      version="1.1" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" 
      y="0px"      
      style="position:absolute; top:0; left:0; z-index:100"
      width="100%" 
      height="100%">     
      <rect 
        ref="introWhiteRec"
        width="100%"
        height="100%"
        fill="white"                          
      />
      <rect 
        ref="introBlackRec"
        width="100%"
        height="100%"
        fill="black"         
      />
      <rect
          ref="introBlackRec"
          width="100"
          height="100"
          fill="grey"/> <!-- center this h and v? -->                
    </svg>