如何在 scale Svg（没有 JS）之后在流中定位 Div？

Question

我想在动态缩放的 SVG 之后放置一个 DIV。不幸的是 DIV 位置没有改变。

<svg style="transform:scale(x); transform-origin:0 0"></svg>
<div>Sould be just under the SVG whatever scale</div>

我尝试了不同的技术（position:relative、flex-direction:column、fit-content、...）但都没有成功。我必须在每次缩放后重新计算 DIV 位置。

是否可以在 CSS 中实现此目标，而没有 Javascript？

Transform.onclick = function () {  
  scale = function ( ratio ) {
    S1.style.transform = 'scale(' + ratio + ')'
  
    //the calculation part I'd like to avoid
    var ty =  S1.height.baseVal.value * ( ratio - 1 ) 
    DivIn.style.transform = 'translateY(' + ty + 'px)'
  }
  
  toggle( this )
}

Dims.onclick = function () {  
  var H = S1.height.baseVal.value
  var W = S1.width.baseVal.value

  scale = function ( ratio ) {
    S1.setAttribute( "height", H * ratio )
    S1.setAttribute( "width", W * ratio )
  }
  
  toggle( this )
}

Symb.onclick = function () {     
  scale = function ( ratio ) {
    S1.style.fontSize = ratio + "em"
  }
  
  toggle( this )
}

Transform.click()

function toggle ( button ) {
  Array.from( document.querySelectorAll( 'button' ) )
  .forEach( b => b.style.fontWeight = button==b ? 700:500 )
}

svg {
  transform-origin: 0 0;
}
div#DivOut {
  position: relative;
}
div#Container {
  position: flex;
  flex-direction: column;
  height: fit-content;
  border: 1px solid blue;
}

<input type=number value=1 oninput="scale(this.value)">
<button id=Transform>1: Transform</button> 
<button id=Dims>2: Relative Height</button> 
<button id=Symb>3: Symbol</button> 

<div id=Container>
  <svg width=50 height=50 id=S1>
    <use xlink:href="#SY"></use>
    <symbol id=SY>
      <rect x=0 y=0 width=100% height=100% fill=red />
    </symbol>
  </svg>
  <div id=DivIn>Next line test 1</div>
</div>
<div id=DivOut>Next line test 2</div>

Answer 1

我找到的最佳解决方案是为 <svg> 元素设置 viewBox 属性。

然后您可以通过 CSS 样式更改宽度和高度来调整它的大小。

function resize()
{
    SVG1.classList.toggle( 'double' )
}

.double {
   width: 200px ;
   height: 200px ;
}

<svg id=SVG1 viewBox="0 0 100 100"  width=100 height=100>  
   <rect x=0 y=0 width=100 height=100 fill=red />
</svg>
<div>
  <button onclick="resize()">Resize</button>
</div>

如何在 scale Svg（没有 JS）之后在流中定位 Div？

How to postion a Div in the flow after a scaled Svg (without JS)?

html

css

svg

viewbox