当我尝试在 SVG 中设置 TextPath 对齐中心时，某些字符丢失

Question

当我使用startOffset或text-anchor属性时，某些字符丢失了。
如何修复它。
谢谢。

---

在这种情况下，缺少字符“1234”。

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1000 1000" style="width: 100%;"><svg width="1000" height="1000" x="0%" y="0%" transform="matrix(1,0,0,1,500,500)"><g font-size="40" font-weight="800"><rect width="300" height="300" x="350" y="350" fill="#ffddff"></rect><path d="M 500,500 m -100,0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200, 0" fill="transparent" stroke="black" id="SvgjsPath1000"></path><text svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><textPath xlink:href="#SvgjsPath1000" fill="url(&quot;#SvgjsLinearGradient1001&quot;)" startOffset="25%" text-anchor="middle" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><tspan alignment-baseline="middle">1234567890ABCDEFGHIJK</tspan></textPath></text></g></svg><defs><linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="SvgjsLinearGradient1001"><stop stop-color="#007cf0" offset="0"></stop><stop stop-color="#ff0080" offset="1"></stop></linearGradient></defs></svg>

我想让这些字符在 Circle 中居中对齐。
像这样：

Answer 1

由 svg.js 生成（我假设）的圆圈首先从左侧绘制。 由于属性textPath相对于路径的起点开始，因此您可以使用textOffset并查找幻数以使文本位于正确的位置，或者您可以从顶部开始您的圆圈。

在代码片段中，我从中心所在的顶部开始路径（只是翻转第一个相对移动命令的 x 和 y 值）并翻转两个弧命令的dx和dy值。

此时您需要的最终控制是将startOffset设置为 50%，它非常接近您共享的图像，并且无论字体大小或字符串长度如何，它都将保持在底部居中。

在代码片段中，我还删除了所有注入的额外代码。 如果这个 SVG 不是用于内联使用，你会想把 xmlns 放回那里，如果内联使用则不需要......另外，如果你出于某种原因需要 svg.js 提供的所有额外标记，你也应该把它放回去.

 <svg viewBox="0 0 1000 1000" style="width: 100%;"> <g font-size="40" font-weight="800"> <rect width="300" height="300" x="350" y="350" fill="#ffddff"></rect> <path d="M 500,500 m 0,-100 a 100,100 0 1,0 0,200 a 100,100 0 1,0 0, -200 " fill="transparent" stroke="black" id="circlePath"> </path> <text> <textPath xlink:href="#circlePath" fill="url('#gradient')" startOffset="50%" text-anchor="middle"> <tspan alignment-baseline="middle">1234567890ABCDEFGHIJK</tspan> </textPath> </text> </g> <defs> <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="gradient"> <stop stop-color="#007cf0" offset="0"></stop> <stop stop-color="#ff0080" offset="1"></stop> </linearGradient> </defs> </svg>

Answer 2

尝试这个：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1000 1000" style="width: 100%;"><svg width="1000" height="1000" x="0%" y="0%" transform="matrix(1,0,0,1,500,500)"><g font-size="26" font-weight="800"><rect width="300" height="300" x="350" y="350" fill="#ffddff"></rect><path d="M 500,500 m -100,0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200, 0" fill="transparent" stroke="black" id="SvgjsPath1000"></path><text svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><textPath xlink:href="#SvgjsPath1000" fill="url(&quot;#SvgjsLinearGradient1001&quot;)" startOffset="25%" text-anchor="middle" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><tspan alignment-baseline="middle">1234567890ABCDEFGHIJK</tspan></textPath></text></g></svg><defs><linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="SvgjsLinearGradient1001"><stop stop-color="#007cf0" offset="0"></stop><stop stop-color="#ff0080" offset="1"></stop></linearGradient></defs></svg>