html - SVG:在textPath的末尾将文本右对齐

我想在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的开头就在我期望的位置开始。

但是， end 文本的结尾距离textPath的结尾很远。

(中间也与textPath的中间位置相去甚远)。

这是屏幕截图:



我究竟做错了什么？如何使结束结束于textPath弧的右端？

最佳答案

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

因此，在您的示例中，“100％”将产生400px的值-SVG的宽度。但是，路径的长度实际上为466。您可以通过实验或使用一些Javascript来获取长度:

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

因此，如果将“100％”更改为“466”，则会获得想要的效果。

<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="233" y="0" text-anchor="middle">
            <textPath xlink:href="#myTextPath">Middle</textPath>
        </text>
        <text x="466" y="0" text-anchor="end">
            <textPath xlink:href="#myTextPath">End</textPath>
        </text>
    </g>
</svg>