将 SVG 缩放到相邻元素的高度

Question

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

出于演示目的，我在这里简单地将 SVG (#triangle) 的高度设置为 10rem，这恰好与 div (#text) 在右边。但是如果你调整 window 的大小，一切都会改变。（请参阅此问题末尾的代码片段）

我想要实现的是能够调整 window 的大小，并且当文本换行（改变其高度）时，SVG 的高度会调整以匹配：

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

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

创建一个 Javascript 解决方案是可以的，但它比最初出现的要复杂一些。

困难在于可用的space决定#text是否回绕（从而决定#text的高度）取决于#triangle的宽度。 #triangle 具有固定的纵横比，因此其宽度取决于其高度，而高度又取决于 #text...

的高度

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

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

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

将 SVG 缩放到相邻元素的高度

Scale SVG to height of an adjacent element

html

javascript

css

svg

responsive-design