项目中用到表格内画折线趋势图,本人使用的svg绘制简单折线;没有数据的单元格显示文字,为了不影响表格的宽度自适应,就想到在svg上写文字。于是就有了在svg上对文字样式进行垂直居中的需求,上代码:
<svg version="1.1" className={Style.svgLine}>
<text x='50%' y='50%' className={Style.svgText}>{text}</text>
</svg>
ok,是不是很简单!
本文介绍如何在SVG绘制的折线图上实现文字的垂直居中,以适应表格宽度自适应的需求。通过使用SVG元素和CSS样式,可以在折线图的空白单元格中显示文字而不影响布局。
项目中用到表格内画折线趋势图,本人使用的svg绘制简单折线;没有数据的单元格显示文字,为了不影响表格的宽度自适应,就想到在svg上写文字。于是就有了在svg上对文字样式进行垂直居中的需求,上代码:
<svg version="1.1" className={Style.svgLine}>
<text x='50%' y='50%' className={Style.svgText}>{text}</text>
</svg>
ok,是不是很简单!
1449