Flexbox按基线对齐SVG

Question

我有一个flexbox，其中包含任意数量的SVG。每个SVG均包含一行文字。 SVG中文本的大小和位置是任意的，但始终是水平的。请参阅以下示例设置：

<div style="display: flex; align-items: baseline;">
  <svg viewBox="0 0 50 35" style="flex-grow:50;">
    <text x="0" y="23" font-size="30px" dominant-baseline="baseline">jim</text></svg>
  <svg viewBox="0 0 90 35" style="flex-grow:100;">
    <text x="0" y="27" font-size="30px" dominant-baseline="baseline">curls</text></svg>
</div>

https://jsfiddle.net/nj5d82wc/16/

我希望flexbox根据内部<text>元素的基线对齐SVG。这可能吗？如何使<text>的基准表向外传播，以便Flexbox可以访问它？

• JavaScript解决方案是完全可以接受的。

• 设置overflow:visible并在SVG底部绘制文本是不可接受的-我需要SVG占用文本的全部空间。