允许SVG根据内容进行扩展

Question

我在包含文本的HTML页面中有一个SVG元素，根据文本的内容和字体大小，文本将比SVG大，因此被截断。文本和字体大小都必须是用户可配置的，因此我无法通过控制文本来防止这种情况的发生。

但是，我很高兴SVG元素在我的页面中扩展以适合内容。是否可以在SVG中执行任何操作，而无需渲染SVG，检查其大小，然后更新SVG尺寸以适合内容？

我的问题的一个小例子在这里：https://jsfiddle.net/TMiguelT/x5d83gb2/2/

const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
var input = $("#input");
var text = $("#text");

// Link the input and the SVG text
input.on("change", e => {
  text.text(e.target.value);
});

// Initialize the input to use the lorem ipsum
input.val(lorem);
input.change();

svg {
  width: 200px;
  height: 200px;
  display: block;
}

<input id="input" />
<svg>
  <text x="50" y="50" id="text"/>
</svg>