css - SVG:如何在我的 SVG 中定位我的文本路径?

标签 css html svg

考虑 following fiddle . (在 firefox 中打开)如何将我的文本路径放在我的 SVG 中,这样它就不会被隐藏?

我尝试将 xy 属性添加到 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>

此外,上面的 fiddle 在 Chrome(或任何其他基于 webkit 的浏览器)中没有显示任何内容,问题是基于 webkit 的浏览器隐藏了溢出的 SVG。我该如何解决?

提前致谢!

最佳答案

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

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

这是在 Chrome 中运行的完整 fiddle :

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

关于css - SVG:如何在我的 SVG 中定位我的文本路径?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22760405/

相关文章:

html - Svg 不缩放

javascript - 如何在 HighChart 中用多个 yAxis 填充两个系列之间的区域?

html - 使用 CSS 在列之间放置间隙

jquery - 我的代码在 Safari 上不起作用

jquery - Bootstrap 4 导航栏在更高处折叠

html - 什么时候应该溢出 :hidden be used for a <div>?

css - 设置 SVG 的后备字体

jquery - 使用 Bootstrap 和 Aurelia 附加的井的随机移动

html - 如何在不模糊文字的情况下模糊图像?

javascript - Websocket 和 telnet 连接