我想将文本添加到路径的中心并水平对齐,不是 沿路径对齐。
我在中心的路径上有以下文本,但我想显示它,使其水平,无论路径朝向什么角度。
<text text-anchor="middle">
<textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath>
</text>
最佳答案
如果我理解正确,您是在每个字母都是直的(即指向北方)之后,但遵循路径。像这样的东西:
看当前SVG standard这似乎是不可能的。
For horizontal text layout flows, the reference orientation for a given glyph is the vector that starts at the intersection point on the path to which the glyph is attached and which points in the direction 90 degrees counter-clockwise from the angle of the curve at the intersection point.
上面的图像是从 SVG 生成的,但这是通过应用旋转属性对每个字母应用单独的字距调整(旋转)来实现的(正如您从缺陷中看到的那样):
<text id="text2897">
<textPath xlink:href="#path2890" id="textPath3304">
<tspan
rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533"
id="tspan2899">
Some sample text for path
</tspan>
</textPath>
</text>
关于text - 使用 SVG,是否可以将文本添加到路径的中心并水平对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1713423/