马黑PHP整站系统

svg文本对齐演示

位置: 首页 > 前端三套件[ 发布时间: 2024.9.27  作者: 马黑  阅读: 184 ]

如下svg文本以中央十字虚线做参照,text标签以十字交叉点为原点,即 x="50%" y="50%",页面初始状态文本对齐方式设置为 text-anchor="start" dominant-baseline="auto",此为缺省或默认设置值,可以尝试更改对齐方式以便观察text标签的 text-anchor 和 dominant-baseline 属性的表现:

SVG文本对齐

对齐设置:

text-anchor(水平对齐):

dominant-baseline(垂直对齐):

【附】本页svg初始代码

前一篇: svg文本描边动画
下一篇: svg textPath 文本定位

发表评论:

       

评论列表 [1条]

#1 | 小希 于 2024-9-27 20:45 发布: 这个空心字体可真是好看。。。SVG文本对齐有这么多种方法。。。又是一堂新授课

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com