Сделайте так, чтобы SVG покрывал весь видовой экран (отзывчивый) и центрировал объект SVG группы по вертикали и горизонтали в окне просмотра

Question

Я пытаюсь настроить SVG так, чтобы он полностью покрывал область просмотра.Я смог сделать это, используя атрибуты css и svg, но этот метод затрудняет выполнение моих вторичных требований.Внутри SVG я хотел бы центрировать объект по горизонтали / вертикали.

- редактировать -

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