Javascript 将SVG文本放入SVG背景矩形中

这是一个包含两个SVG的框。一个用于文本，一个用于背景矩形

---

我想把文本放在背景矩形内。这样就不会有文本延伸出背景矩形。（请注意，我不想对文本进行换行，我想减小文本的尺寸，或者做一些事情，以便将矩形内的文本放在一行中）

我已经尝试了很多解决方案，但运气不佳，我认为可能没有纯粹的CSS解决方案，所以即使是用Javascript来解决这个有线问题也是可以接受的

注意：我真的需要文本和背景矩形是SVG

代码如下：

@font-face{
字体系列：“Heebo灯”；
src:url（Heebo Light.ttf）格式（“truetype”）；
}
svg{
位置：相对位置；
显示：块；
溢出：可见；
指针事件：无；
}
身体{
背景色：#fdfd；
溢出：隐藏；
}
.box svg:n个类型（1）{
位置：绝对位置；
z指数：3；
}
.box svg:n个类型（2）{
位置：绝对位置；
z指数：2；
}
.box，svg{
最大宽度：100%；
最大高度：2.59vw；
}
.盒子{
位置：相对位置；
高度：2.59vw；
}

这是一个应该适合的长文本这是一个应该适合的长文本这是一个应该适合的长文本

这是一个应该适合的长文本这是一个应该适合的长文本这是一个应该适合的长文本

由于框很小，文本很长，因此文本将清晰可见

在javascript中，我得到文本的长度：

span15.getComputedTextLength（）

，我将此值用于viewBox属性

让text_length=span15.getComputedTextLength（）；
document.querySelector（“#first”）.setAttribute（“viewBox”，`0${text_length}45`）

@font-face{
字体系列：“Heebo灯”；
src:url（Heebo Light.ttf）格式（“truetype”）；
}
svg{
位置：相对位置；
显示：块；
溢出：可见；
指针事件：无；
轮廓：纯红；
}
身体{
背景色：#fdfd；
溢出：隐藏；
}
.盒子{
位置：相对位置；
高度：2.59vw；
轮廓：立体；
}

这是一个应该适合的长文本这是一个应该适合的长文本这是一个应该适合的长文本

不，它对我不起作用……你可以使用

我如何使用Javascript计算一个合适的veiwBox？更改veiwBox似乎很有希望，但我不知道如何计算它！我可以计算框宽，但我不知道如何找到viewBox…？（请注意，我不想对文本进行换行，我想减少文本的尺寸，或者在一行中调整矩形内的文本）；我在文本长度上加了一个额外的70，以便在文本中添加一些填充。。。这是一个合适的解决方案还是你可以建议一个更好的解决方案？我也会这么做。70会给你35的“填充”