svg多个单词调整完scale属性后 位置变化了 怎么样让其竖着紧凑排列？

Question

我想问一下大佬 这段svg里面包含了三个被调整过高度的单词 但是调整后各自的位置都变了，如图
scale这个属性有什么规律吗 怎么能让每个单词再改变高度后 依然在y轴一个个紧挨着 因为没办法一个一个调整translate属性 因为我有很多这样不同高度的单词需要循环 所以需要找到其中的规律

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">

  <text x="60" y="30" font-size="30" fill="black" transform="scale(1, 0.7)">Hello1</text>
  
  <text x="60" y="60" font-size="30" fill="black" transform="scale(1, 0.5)">Hello2</text>
  
  <text x="60" y="90" font-size="30" fill="black" transform="scale(1, 0.6)">Hello3</text>
</svg>

这是我手动调整后想要的效果

Answer 1

浏览器渲染 transform 的方式是先把元素原样渲染上去，然后再进行变换。所以放大元素不会把周围元素挤开，缩小元素会留下空白。

具体过程请了解浏览器渲染原理。