html – 内联SVG随Flexbox消失

发布时间：2020-12-14 23:14:19 所属栏目：资源来源：网络整理

导读：我试图使用Flexbox在垂直和水平方向中心内联SVG元素.出于某种原因,当我在父容器上显示：flex时,内联SVG就会消失. body { background-color: #000; margin: 0; border: 0; outline: 0;}.flexbox-container { display: flex; align-items: center; justify-con

我试图使用Flexbox在垂直和水平方向中心内联SVG元素.出于某种原因,当我在父容器上显示：flex时,内联SVG就会消失.

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}


如果你知道为什么会这样,我会很感激.


最佳答案
您的SVG没有设置内部宽度/高度.
您可以在SVG中执行此操作,< svg width =“200”height =“150”...< / svg>或使用CSS规则

.flexbox-container svg {
  width: 100%;
}

堆栈代码段

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexbox-container svg {
  width: 100%;
}

如果您希望SVG水平和垂直居中,则Flex容器需要一个高度,即全视口,100vh
堆栈代码段

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.flexbox-container svg {
  width: 100%;
}

看起来使用CSS宽度：100％和百分比在Firefox上的呈现方式与Chrome上的不同,但在SVG中使用内部宽度=“…”.
Src：SVG Spec: missing documentation: the “Viewport” (and 

堆栈代码段

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

由于SVG的内部宽度是“像素”,您当然可以在CSS中使用px.
堆栈代码段

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.flexbox-container svg {
  width: 220px;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!