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>

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

1 个答案: