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

Question

我正在尝试配置 SVG 以响应地覆盖整个视口。我已经能够使用 css 和 svg 属性来做到这一点，但这种方法很难实现我的次要要求。在 SVG 中，我想 horizontally/vertically 将对象居中。

--编辑--

 <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>

Answer 1

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

<svg 
      version="1.1" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink"      
      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"
          x="-50"
          y="-50"
          style="transform: translate(50vw, 50vh)";
          fill="grey"/> <!-- center this h and v? -->                
    </svg>

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

Make SVG cover entire viewport (responsive) and center SVG group object vertically and horizontally in viewport

svg

viewport

responsive-design