评论资讯 [ 总 424 则 ]
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
友情链接
网站统计
svg textPath 文本定位
在svg里,text元素可以内嵌 textPath 标签令文本沿着指定路径布局。我们需要事先用 defs 标签定义所需路径并给路径指定 id 以便将来引用。在text标签里,要呈现的文本应该放在 textPath 标签内。textPath 标签首先用 href="#路径id"(建议)或 xlink:href="#路径id" 指明要引用的路径,然后使用 textPath 专有属性 startOffset(开始偏移量)定位文本。以下演示,我们用use标签实例化路径出于方便观察效果:
代码:
需要注意的是,文本置入textPath之后,文本的坐标系会跟随路径的坐标系,有可能因为路径的弯曲程度造成文本被挤压等现象,若此,可以考虑给textPath加入一个 textLength 属性,调整其值到合适的尺寸,例如,以上面的演示示例为例,可以这样:textLength="180"。
前一篇: svg文本对齐演示
下一篇: SVG : mask 遮罩
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2024-9-28 17:20 发布: 这个随路径排列好用,做弯曲的文字方便~~