Question

考虑following fiddle。（在firefox中打开它）如何将我的文本路径放在SVG中以便它不被隐藏？

我尝试将x和y属性添加到svg代码和text代码，但文字不会移动。

<svg width="597" height="98" style="overflow:visible; ">
<defs>
    <path d=" M 0,0  L 596,0  M 0,96  L 596,96 " id="_x0000_i1042tp" />
</defs>
<text x="10" y="40" style="font-size:48px; font-family:&quot;Times New Roman&quot;; fill:#369; " method="stretch">
    <textPath xlink:href="#_x0000_i1042tp" xmlns:xlink="http://www.w3.org/1999/xlink">WortArt Test3</textPath>
</text>

此外，上述小提琴并未在Chrome（或任何其他基于webkit的浏览器）中显示任何内容，问题是基于webkit的浏览器隐藏了溢出的SVG。我该如何解决这个问题？

Thanx提前!!

Answer 1

您需要弄乱基线和对齐属性。以下似乎将它放在两行内，但不是在第二行的顶部：

<textPath dominant-baseline="hanging" xlink:href="#mypath">WortArt Test3</textPath>

这是完整的小提琴，适用于Chrome：

http://fiddle.jshell.net/Qcaa8/1/

Answer 2

将0,0 L 596,0更改为0,X L 596,X，其中X是文本 bottom 的位置。（因此，如果您希望它位于图像的顶部，则应使用（aprox）文本的字体大小）。

Answer 3

您可以在＆lt; text＆gt;上使用dy用于向下移动文本的元素，或者您可以调整路径以便它描述您真正想要的文本基线。请参阅fiddle。

overflow:visible在Chrome中没有任何影响，提交为bug 231577。请注意，webkit / Safari也有same bug。

SVG：如何在我的SVG中定位文本路径？

3 个答案: