内联 SVG 随 Flexbox 消失

Posted

技术标签:

【中文标题】内联 SVG 随 Flexbox 消失【英文标题】：Inline SVG Disappears with Flexbox 【发布时间】：2018-04-05 23:41:43 【问题描述】：

我正在尝试使用 Flexbox 将内联 SVG 元素垂直和水平居中。出于某种原因，当我在父容器上 display: flex 时，内联 SVG 就消失了。

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


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

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

如果您知道为什么会发生这种情况，我将不胜感激。

【问题讨论】：

【参考方案1】：

问题在于您没有告诉 child &lt;div&gt; 元素增长。 您可以使用flex-grow: 1 或简写flex: 1 0 auto（其中第一个值为flex-grow，第二个值为flex-shrink，第三个值为flex-basis）来实现。

我已将flex-grow 上的.flexbox-container &gt; div 添加到以下示例中：

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


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


.flexbox-container > div 
  flex-grow: 1;

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

希望这会有所帮助:)

【讨论】：

感谢您的回答，非常感谢【参考方案2】：

您的 SVG 没有设置内部宽度/高度。

您可以在 SVG、&lt;svg width="200" height="150" ...&lt;/svg&gt; 或 CSS 规则中执行此操作

.flexbox-container svg 
  width: 100%;

堆栈sn-p

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

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

如果您希望 SVG 水平和垂直居中，则 flex 容器需要一个高度，即完整的视口，100vh

堆栈sn-p

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

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

使用带有百分比的 CSS width: 100% 似乎在 Firefox 上呈现的效果与在 Chrome 上的效果不同，但在 SVG 中使用内部 width="..." 会呈现效果。

源：SVG Spec: missing documentation: the “Viewport” (and &lt;svg width=”…”&gt;)

堆栈sn-p

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


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

<div class="flexbox-container">
  <div>
    <svg  id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

由于 SVG 的内部宽度是“像素”，你当然可以在 CSS 中使用px。

堆栈sn-p

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;

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

【讨论】：

谢谢你的回答，我很感激。我发现在某些浏览器中，比如 FF，无法处理 SVG 宽度设置为 100%。你遇到过这个问题吗？ @JoelHoelting 似乎是一个长期存在的问题......我更新了我的答案以及讨论该问题的链接

以上是关于内联 SVG 随 Flexbox 消失的主要内容，如果未能解决你的问题，请参考以下文章

深度嵌套的 flexbox 布局会导致性能问题吗？

如何使用 flexbox 动态地进行 3 列 3 行的布局

TailwindCSS Flexbox 导航栏链接未内联显示

Safari 在使用 flexbox 居中时不显示 SVG

使用 ReactJS 的跨浏览器 flexbox 内联样式

在 Flexbox 中包含 SVG 图像