评论资讯 [ 总 498 则 ]
·悄然 - 2025-4-28 22:39
·飞飞 - 2025-4-28 15:25
·知名不具 - 2025-4-28 13:06
·马黑 - 2025-4-28 12:14
·飞飞 - 2025-4-22 21:44
·飞飞 - 2025-4-22 14:27
·小希 - 2025-4-19 09:03
·飞飞 - 2025-4-17 18:46
·悄然 - 2025-4-5 11:32
·马黑 - 2025-4-1 19:54
·飞飞 - 2025-4-28 15:25
·知名不具 - 2025-4-28 13:06
·马黑 - 2025-4-28 12:14
·飞飞 - 2025-4-22 21:44
·飞飞 - 2025-4-22 14:27
·小希 - 2025-4-19 09:03
·飞飞 - 2025-4-17 18:46
·悄然 - 2025-4-5 11:32
·马黑 - 2025-4-1 19:54
友情链接
网站统计
svg文本对齐演示
如下svg文本以中央十字虚线做参照，text标签以十字交叉点为原点，即 x="50%" y="50%"，页面初始状态文本对齐方式设置为 text-anchor="start" dominant-baseline="auto"，此为缺省或默认设置值，可以尝试更改对齐方式以便观察text标签的 text-anchor 和 dominant-baseline 属性的表现：
对齐设置：
【附】本页svg初始代码
<svg width="800" height="200"> <g fill="none" stroke="gray" stroke-width="1" stroke-dasharray="2"> <line x1="0" y1="50%" x2="100%" y2="50%"></line> <line x1="50%" y1="0" x2="50%" y2="100%"></line> </g> <text id="svgtext" x="50%" y="50%" text-anchor="start" dominant-baseline="auto" fill="none" stroke="darkred" stroke-width="3" stroke-linejoin="round" font-family="'微软雅黑','黑体'" font-size="60" font-weight="bold">SVG文本对齐</text> </svg>
前一篇: svg文本描边动画
下一篇: svg textPath 文本定位
发表评论:
评论列表 [1条]
#1 | 小希 于 2024-9-27 20:45 发布: 这个空心字体可真是好看。。。SVG文本对齐有这么多种方法。。。又是一堂新授课
