圆形内的弯曲文本和中心到底部中心

Question

我有一个圆圈，我需要在圆圈内有文字，遵循圆圈路径。 我发现了另一个问题： Wrapping a text around a circular element

但是，我无法实现我想要做的事情。 我的文本有一个动态长度，我需要它始终以圆的底部中心为中心，并在两侧“向上”包裹，如果这有意义的话。 我尝试过 svg 方法，但是当文本太长时，它会被截断。 这样做的最佳方法是什么？

此处的文本将是橙色的（动态长度），并且需要居中于圆的底部（蓝点）

Answer 1

尝试在 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'; document.body.append(temp); const w = temp.offsetWidth; document.body.removeChild(temp); const circumference = Math.PI * 200; document.querySelector('svg').style.transform = 'rotate(' + Number((180 * w / circumference) - 90) + 'deg)';

 .qr--label { font-size: 20px; margin: 0 0 -15px 0; text-align: center; }

 <div class="qr"> <div> <svg width="220" height="220"> <path fill="white" d="M0,110a110,110 0 1,0 220,0a110,110 0 1,0 -220,0"/> <path fill="none" id="innerCircle" d="M10,110a100,100 0 1,0 200,0a100,100 0 1,0 -200,0"/> <text> <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#innerCircle" class="qr--label"> Some dynamic text here </textPath> </text> </svg> </div> </div>