Question

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

＆＃13;

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

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

＆＃13;

如果你知道为什么会这样，我会很感激。

Answer 1

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

您可以在SVG，<svg width="200" height="150" ...</svg>或CSS规则

中执行此操作

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

Stack snippet

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

Stack snippet

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="..."会显示相同内容。

Src：SVG Spec: missing documentation: the “Viewport” (and <svg width=”…”>)

Stack snippet

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 width="220" 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。

Stack snippet

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>

Answer 2

问题是你没有告诉孩子 <div>元素增长。
您可以使用flex-grow: 1或速记flex: 1 0 auto执行此操作（第一个值为flex-grow，第二个值为flex-shrink，第三个值为flex-basis ）。

我已将flex-grow .flexbox-container > div添加到以下示例中：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会有所帮助：）

内联SVG随Flexbox消失

2 个答案: