Javascript 圆内的曲线文字，中心到下中心

我有一个圆，我需要在圆内有文本，沿着圆的路径。我发现了另一个问题：

然而，我没能实现我想要做的。我的文本有一个动态长度，我需要它始终居中于圆的底部中心，并在两侧“向上”环绕，如果这有意义的话。我尝试过svg方法，但是当文本太长时，它会被切断。这样做的最佳方法是什么

---

这里的文本是橙色的（动态长度），它需要居中到圆的底部（蓝点）

在svg中尝试使用中间位置定位文本后，我发现如果文本沿着路径，它会剪切文本-如问题中所述

在SVG和/或CSS中找不到解决方案，因此求助于JS方法，并在此处显示它，以备作为临时措施使用

在这个片段中，将找到文本的宽度，并计算SVG需要旋转的量，以便将文本的中点放置在圆的底部中心：

const textPath=document.querySelector（'textPath'）；
const temp=document.createElement（'div'）；
temp.innerHTML=textPath.innerHTML；
temp.style.display='inline block'；
temp.style.fontSize='20px'；
文件.正文.附加（临时）；
常数w=温度偏移网络宽度；
文件。主体。移除儿童（临时）；
常数周长=Math.PI*200；
document.querySelector（'svg'）.style.transform='rotate（'+Number（（180*w/周长）-90）+'deg'）
.qr--标签{
字体大小：20px；
边际：0-15px0；
文本对齐：居中；
}

这里有一些动态文本
简单的方法是使用svg按路径创建文本，检查当“文本太长”时您想做什么-进行一些计算以缩小文本大小，使其适合，还是增加圆圈大小以适合？将设置文本的最大长度，使其始终适合圆圈。所以在最坏的情况下，文本将环绕整个圆圈，在结束和开始之间有一个小的空间。@Greg——我使用了这种方法。但是，当与startOffset和文本锚定（将文本居中）一起使用时，文本会在某个点被截断。我认为这可能是由于svg路径，但我对svg了解不够，无法对其进行操作。当然，如果没有别的办法，我就得学。我只是想看看是否有其他方法可以实现这一点。如您所见，文本过长时会被截断。