在 flex 项目中缩放 svg 以匹配 flex 容器的高度并保持纵横比

Question

• 我想在带有一些文本的 div 旁边放置一个 SVG。
• SVG 在缩放时应保持其纵横比以匹配父级的高度。
• 父项的高度应仅足以容纳其他 flex 项中的文本。
• 我想让它成为一个可重复使用不同数量文本的组件。

我已经尝试了一些方法，我得到的最接近 SVG 不会在 Chrome 中消失的方法是在这个 codepen 中：https://codepen.io/rosshathaway/pen/ExjePpM。问题是 SVG 占用了尽可能多的空间。 CSS：

* {
  box-sizing: border-box;
}

.outer {
  display: flex;
}

.inner {
  margin: 4px;
  border-top: dotted 8px black;
  border-right: dotted 8px black;
  border-bottom: dotted 8px black;
  padding: 0.5em 2em;
}

.logo {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

HTML：

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

谢谢。

Answer 1

一般来说，这不是特定的 SVG 问题。

问题 1 - “删除纵横比 CSS 技巧”

padding-bottom: 100%; 是 1:1 Aspect Ratio box 的一个技巧 - 在你的情况下，`svg1 图标已经是一个正方形（所以删除那些额外的样式） https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

问题 2

您设置了两个列 - 一个带有文本，一个带有图像。

flex-basis 属性指定灵活项的初始长度。 https://www.w3schools.com/cssref/css3_pr_flex-basis.asp

flex-basis 默认为自动。

auto ==> 浏览器将计算并选择指定元素的宽度 (width mdn docs)。所以结果看起来“有问题”（大图和小文本）：

* {
  box-sizing: border-box; 
}

.outer {
  display: flex;
  border: dotted 8px red;
}

.inner {
}

.logo {
  width: 100%;;
  height: auto;
}

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

一种解决方案 - 将 flex-grow: 1; 添加到 text-col

弹性增长：1； - 元素将增长 1 倍。如果没有其他 flexbox 项具有 flex-grow 值，它将填满剩余空间。 https://cssreference.io/property/flex-grow/

对于svg，添加您想要的任何宽度（20%、100px 或 20em）。

.flex-container {
  display: flex;
  border: 1px dashed orange;
}
#col1{
  max-width: 100%;
  border: 3px dashed violet;
}
#col2{
  border: 2px dashed blue;
  flex-grow: 1;
}
svg {
  height: auto;
  width: 150px;
}

  <section class="flex-container">
    <div id="col1">
      <svg
    version="1.0"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 93 93"
    preserveAspectRatio="xMidYMid meet"
  >
    <g
      transform="translate(0, 93) scale(0.100000,-0.100000)"
      fill="#231f20"
      stroke="none"
    >
      <path
        d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
  285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
  -166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
  13 151 2 203 -21z"
      />
      <path
        d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
  m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
      />
      <path
        d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
  71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
  -137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
      />
    </g>
  </svg>
  <br>
   width: 150px;
    </div>
    <div  id="col2" class="col">
      A few <br>
      lines <br>
      of text <br>
      bla bla bla bla bloop <br>
      aADSF<br>

     
      </p>
      gljsdf
    </div>
  </section>

stackoverflow相关问题：

Make div fill remaining *horizontal* space in flexbox

Answer 2

我最终制作了一个包含边框的新 SVG。这将正确缩放，但边框点的大小和它们之间的空间会改变，而不是像 CSS 边框那样制作或删除原始大小的点。