SVG：在 textPath 末尾右对齐文本

Question

我想在 textPath 的末尾右对齐文本：

<svg height="300" width="400">
    <defs>
        <path id="myTextPath" d="M30,160  A175,175 0 0,1 370,160" />
    </defs>
    <path d="M30,160  A175,175 0 0,1 370,160" style="stroke: black; stroke-width:1; fill:none;" />
    <g fill="black" stroke="none">
        <text x="0%" y="0" text-anchor="start">
            <textPath xlink:href="#myTextPath">Start</textPath>
        </text>
        <text x="50%" y="0" text-anchor="middle">
            <textPath xlink:href="#myTextPath">Middle</textPath>
        </text>
        <text x="100%" y="0" text-anchor="end">
            <textPath xlink:href="#myTextPath">End</textPath>
        </text>
    </g>
</svg>

你可以在这里看到这个工作：http : //jsfiddle.net/7sqdxw11/

在开始，我会期望文本开始正确的-在textPath的开始。

但是，结尾文本的结尾远远低于 textPath 的结尾。

（中间也很害羞的 textPath 的中间）。

这是一个屏幕截图：

我究竟做错了什么？如何让End在 textPath 弧的右端结束？

Answer 1

在 SVG 中，百分比坐标通常指 SVG 的宽度，或者在某些情况下指父对象的宽度。

因此，在您的示例中，“100%”将产生 400px 的值 - SVG 的宽度。然而你的路径实际上有 466 的长度。你可以通过实验或使用一些 Javascript 来获得长度：

var len = document.getElementById("myTextPath").getTotalLength();

因此，如果将“100%”更改为“466”，您将获得所需的效果。

var len = document.getElementById("myTextPath").getTotalLength();