缩放 SVG 到相邻元素的高度

Posted 2023-03-06

【中文标题】缩放 SVG 到相邻元素的高度

【英文标题】：Scale SVG to height of an adjacent element

【发布时间】：2022-01-18 06:29:02

【问题描述】：

我正在尝试缩放具有固定纵横比的 SVG，以匹配相邻元素（包含一系列不同元素的 div）的高度。

出于演示目的，这里我简单地将 SVG (#triangle) 的高度设置为 10rem，这恰好与右侧 div (#text) 的高度相匹配。但是如果你调整窗口大小，一切都会改变。 （见本题末尾的代码sn-p）

我想要实现的是能够调整窗口大小，并且随着文本换行（更改其高度），SVG 的高度会调整以匹配：

我以为会有 CSS 网格或 Flexbox 解决方案，但目前我还没有找到。

（我也很高兴使用 CSS 解决方案而不是 SVG，例如使用剪辑路径或其他样式的 div，但关键问题是它应该具有固定的纵横比）

创建一个 javascript 解决方案是可以的，但它比最初看起来要复杂一些。

困难在于，决定#text 是否换行（从而决定#text 的高度）的可用空间取决于#triangle 的宽度。 #triangle 有一个固定的纵横比，所以它的宽度取决于它的高度，这将取决于#text 的高度...

实用说明：显然，这种布局并不能提供很大的灵活性，并且只能用于特定类型的内容——狭窄的 SVG 和相当短的文本元素。 在桌面屏幕上，右侧会有很多空白空间，没有换行，而在移动设备上，它会占据整个宽度，并带有一些换行的文本。

#container 
  border: 1px goldenrod solid;
  padding: 1em;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1em;


#triangle 
  border: 1px steelblue solid;
  height: 10rem;


#text 
  border: 1px steelblue solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

<div id="container">

  <svg id="triangle" 
       viewBox="0 0 6 8">
    <polygon points="0,8 3,0 6,8"
             fill="tomato"/>
  </svg>


  <div id="text">
    <h1>
      Triangle
    </h1>
    <p>
      A polygon with three edges and three vertices.
    </p>
    <a href="https://en.wikipedia.org/wiki/Triangle">
    Triangle on Wikipedia
    </a>      
  </div>


<div>

</body>

【问题讨论】：

您可能不得不重新考虑您的要求。您可能会进入一个反馈循环，您的文本会变得越来越窄；这使得三角形更大更宽；这反过来又使文本更窄更高。

【参考方案1】：

这不是完美的解决方案，但也许其他人可以扩展它。

主要技巧是 SVG (svg) 的高度为 0，但会根据父元素 (.triangle) 增长 (flex-grow: 1;)。

这个解决方案的问题是.triangle 和.text 之间的共享是固定的（grid-template-columns: 1fr 4fr;）。这个份额是可以调整的，但是如果用例在文本高度上有很大的不同，那就是个问题了。

#container 
  border: 1px goldenrod solid;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 1em;


.triangle 
  display: flex;
  align-items: stretch;
  flex-direction: column;


.triangle svg 
  border: 1px steelblue solid;
  flex-grow: 1;
  height: 0;


.text 
  border: 1px steelblue solid;

<div id="container">
  <div class="triangle">
    <svg viewBox="0 0 6 8">
      <polygon points="0,8 3,0 6,8" fill="tomato"/>
    </svg>
  </div>
  <div class="text">
    <h1>Triangle</h1>
    <p>A polygon with three edges and three vertices.</p>
    <a href="https://en.wikipedia.org/wiki/Triangle">
    Triangle on Wikipedia
    </a>
  </div>
</div>

【讨论】：

这很有帮助！当这种方法失效时，我最终将您的解决方案与媒体查询一起使用以切换到另一个布局。