代码之家 › 专栏 › 技术社区 › billy jean

使SVG覆盖整个视区(响应)并使SVG组对象在视区中垂直和水平居中

viewport responsive-design svg

billy jean · 技术社区 · 5 年前

我正试图配置一个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>

1 回复 | 直到 5 年前

enxaneta 5 年前

我不太确定这是否是你需要的:

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

推荐文章

SaÅ¡a Å ijak · 同一浏览器中同一页面的不同视口宽度

7 年前

hidayat · 在Vulkan中翻转视口

7 年前

Madhu Velpuri · 硒中视口元素的验证

7 年前

RMS · Meta-viewport标记user-scalible=在Android 6.0+、Chrome版本53中不忽略?

8 年前

zombiecode · iPhone上显示小尺寸的网站

9 年前

Mithrandir · 窗口仍有水平滚动

9 年前

Raymond Yeh · ExtJS如何在视口中引用区域面板

9 年前

steveOw · THRE.js正交相机外观必须与视口外观匹配?

9 年前

MoonDev · iOS 7中的视口单元bug

10 年前

Gops · 将视图端口高度添加到Javascript插件

11 年前