• 最终效果
• 案例源码
• 知识点总结
  • 怎么给rect节点添加文字？
  • 怎么让矩形的起点看起来在下边？
  • 怎么样让文字在矩形的中间显示？

最终效果

案例源码

知识点总结

怎么给rect节点添加文字？

目前直接给rect中添加text节点是没有效果的。

想要给rect添加文本，目前只能用g标签同时包裹rect和text节点，并将text节点的位置，设置到rect节点的上边。结构就像这样

怎么让矩形的起点看起来在下边？

因为所有矩形开始时的y属性值都是0,所以初始画面是所有的矩形看起来都是自上而下开始的，就像这样，并不是想要的最终结果。

想要矩形的起点看起来在下边，可以给矩形的y属性值设为svgHeight - 矩形的实际高度，这样就能使矩形起点的的显示效果看起来在下边。

怎么样让文字在矩形的中间显示？

因为rect节点和text节点平级显示，可以给text节点的y属性值设为svgHeight - 一些自己觉得适合的高度,让文本在矩形的起点附近显示；给text节点的x属性值设为矩形的x属性值 + 矩形宽度的一半，但是这样的效果如下，文字有些偏右，不合预期。

在上面的基础上可以给text节点添加text-anchor: start | middle | end;属性，指定文本的对齐方式。为了让文本居中，可以使用text-anchor: middle;,即可达成效果。

一个注意点
当text-anchor值为start时，经本人测试后，认为其是右对齐。具体使用方式可参考MDN