我想在 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/
Start 文本从我期望的位置开始 - 在 textPath 的开头。
但是,end 文本的结束距离 textPath 的末尾很短。
(Middle 也远离 textPath 的中间)。
截图如下:
我做错了什么?如何让 End 在 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>
关于html - SVG:文本路径末尾的文本右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33028856/