圓形內的彎曲文本和中心到底部中心

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>