我無法將 SVG 包裹在 div 中以正確縮放

Question

我有以下 HTML 層次結構：

div: flex 1 1 auto height=56px (modified by JS)
  div: grid 1fr
    svg with viewBox, width=100% height=100%

當頂級 div 的高度被 JS 更改時，這會正確縮放 svg 以適應網格 div。 但是當那里有更多一層 div 時，svg 會忽略父級比例並溢出父級：

div: flex 1 1 auto height=56px (modified by JS)
  div: grid 1fr
    wrapper div ***PROBLEM***
      svg with viewBox, width=100% height=100%

我在下面有一個片段顯示了這兩種情況的行為。 不幸的是，在我的真實應用程序中，我有時需要那個包裝器（它可能是<a>而不是<div> ，但這也顯示了同樣的問題）。 我能否以某種方式使該元素不影響 SVG 縮放算法？ 我已經審查了resize svg wrapped in div which is wrapped in div但那里的解決方案都沒有幫助。 我正在尋找純 HTML/CSS 解決方案，因為在我的真實代碼中，JS 大小調整發生在框架中。 我正在使用最近的 Chrome 瀏覽器。

這是兩種情況的片段：

 function resizeElt(id, h) { const elt = document.getElementById(id) elt.style.height = h } let large = false function resize(id) { large=,large resizeElt(id? large: '100px' : '50px') }

 .top { width: 30vw; height: 50px; border: 1px solid blue; display: flex; flex: 1 1 auto; }.svg { margin: auto; /* center */ display: block; border: 1px dashed red; }.grid { display: grid; grid-template-columns: 1fr; column-gap: 10px; align-items: center; width: 100%; }.wrapper { }

 <h3> Show fit to width and height: SVG stays within bounds </h3> <button onclick="resize('top1')"> Resize container taller/shorter </button> <div id="top1" class="top"> <div class="inner1 grid"> <svg class="svg" height="100%" width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> <polygon fill=green stroke-width=0 points="0,10 20,10 10,5" /> </svg> </div> </div> <h3> Example 2, SVG wrapped in div, doesn't scale properly: </h3> <button onclick="resize('top2')"> Resize taller/shorter </button> <div id="top2" class="top"> <div class="inner1 grid"> <div class="wrapper"> <svg class="svg" height="100%" width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> <polygon fill=green stroke-width=0 points="0,10 20,10 10,5" /> </svg> </div> </div> </div>

Answer 1

剛剛向.wrapper添加了兩條規則，現在它似乎可以工作了。

.wrapper {
  overflow:hidden;
  height: 100%;
}

 function resizeElt(id, h) { const elt = document.getElementById(id) elt.style.height = h } let large = false function resize(id) { large=,large resizeElt(id? large: '100px' : '50px') }

 .top { width: 30vw; height: 50px; border: 1px solid blue; display: flex; flex: 1 1 auto; }.svg { margin: auto; /* center */ display: block; border: 1px dashed red; }.grid { display: grid; grid-template-columns: 1fr; column-gap: 10px; align-items: center; width: 100%; }.wrapper { overflow:hidden; height: 100%; }

 <h3> Show fit to width and height: SVG stays within bounds </h3> <button onclick="resize('top1')"> Resize container taller/shorter </button> <div id="top1" class="top"> <div class="inner1 grid"> <svg class="svg" height="100%" width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> <polygon fill=green stroke-width=0 points="0,10 20,10 10,5" /> </svg> </div> </div> <h3> Example 2, SVG wrapped in div, <strike>doesn't</strike> scale properly: </h3> <button onclick="resize('top2')"> Resize taller/shorter </button> <div id="top2" class="top"> <div class="inner1 grid"> <div class="wrapper"> <svg class="svg" height="100%" width="100%" viewBox="0 0 20 10"> <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> <polygon fill=green stroke-width=0 points="0,10 20,10 10,5" /> </svg> </div> </div> </div>