如何使用JavaScript动态调整SVG中文本元素的高度和宽度

我正在进行一个项目，在这个项目中，我必须使用javascript动态添加Svg文本元素，并具有给定的文本框宽度和高度，而不会影响字体比例。我做不到，请帮帮我

提前谢谢

函数opacityValue（）{
var opValue=document.getElementById（“myRange”）.value；
document.getElementById（“opacityValue”）.textContent=“（“+opValue/100+”）”；
}
//
函数txtOnFloor（）{
var color=document.getElementById（“clr”）.value；
var opacity=document.getElementById（“myRange”）.value/100；
var fontFamily=document.getElementById（“family”）.value；
var svgs=document.getElementById（“svgcontent”）；
var svg=svgs.getElementsByTagName（“g”）[0]；
svg.innerHTML=“”；
var g=document.createElements（“http://www.w3.org/2000/svg“，“g”）；
var g2=document.createElements（“http://www.w3.org/2000/svg“，“g”）；
var rectNull=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
var svgText=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
var svgTexttemp=document.getElementById（“bg_svgtext”）.value；
var textWidth=svgTexttemp.length；
g、 setAttribute（“id”、“gvr”）；
var textNode=document.createTextNode（“+svgTexttemp+”）；
svgText.appendChild（textNode）；
/////
var width1=parseInt（document.getElementById（“w1”）.value）；
var width2=document.getElementById（“w2”）；
if（width2！=null&&width2！=0）{
宽度2=parseInt（宽度2.value）/100；
}
否则{
宽度2=0；
}
变量宽度=宽度1+宽度2；
var depth1=parseInt（document.getElementById（“d1”）.value）；
var depth2=document.getElementById（“d2”）；
if（depth2！=null&&width2！=0）{
depth2=parseInt（width2.value）/100；
}
否则{
深度2=0；
}
变量深度=深度1+深度2；
var比率=宽度/深度；
//
如果（比率>1）{
对于（变量i=1；i=i&&ratio否则，如果（比率为了使示例更清晰，我将其缩短到相关部分。最好的策略是让浏览器为您调整文本大小。它将适用于所有纵横比，因此不需要您区分大小写


首先，添加固定字体大小的文本
将其添加到文档（以便实际呈现）后，获取其边界框的大小

必须将每个图示符视为单独的图形元素。计算必须假设所有图示符都占用了图形元素。完整的图示符单元格的宽度必须等于水平前进，高度必须等于水平文本的EM框


如果使用内部
元素包围
元素，则可以定义与该边界框相等的属性。如果宽度和高度属性与所需的最终大小匹配，文本将自动拟合。该属性定义了该拟合的确切规则



var width=100，height=100，text=“平面布置图”；
var content=document.querySelector（“svgcontent”）；
//添加一个矩形以可视化目标大小
var rectNull=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rectNull.classList.add（“展位轮廓”）；
setAttribute（“宽度”，宽度）；
setAttribute（“高度”，高度）；
content.appendChild（rectNull）；
//内部svg作为具有大小调整功能的文本容器
var innerSvg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
innerSvg.classList.add（“booth”）；
//目标尺寸
setAttribute（“宽度”，宽度）；
setAttribute（“高度”，高度）；
//将文本内容放置在左下角，使其大小
//填充目标维度
setAttribute（“preserveSpectratio”、“xMinYMax meet”）；
//文本内容
var svgText=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
svgText.textContent=文本；
appendChild（svgText）；
//渲染
appendChild（innerSvg）；
//和测量尺寸
var-box=svgText.getBBox（）；
//转换为viewBox属性格式
var viewBox=[box.x，box.y，box.width，box.height]。连接（“”）；
setAttribute（“viewBox”，viewBox）；
#svgcontent{
溢出：可见；
}
.展位轮廓{
填充：无；
笔画：黑色；
}
.展位文本{
字体系列：衬线；
字体大小：10px；
}
对于文本长度，我将使用
getComputedTextLength（）
method。如果您需要更多帮助，请编辑您的问题并添加HTML以及制作工作示例所需的任何内容。您能否在我的代码段中实现这一点，因为它在我的案例中不起作用。我将非常感谢。使用此方法，我无法在“svg编辑”中拖放此文本对象。