D3.js-文本

居中

我之前一直都是自己通过计算文本的字符长度以及字体的大小，再根据文本对应的元素的 x、y 信息来计算最终文本的位置，走了很多弯路。

其实 D3 的 Text 标签自带的text-anchor属性就可以实现了，

弧形文字

类似这样的效果：

arc

可以通过textPath实现，通过 path 确定位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<svg
  xmlns="https://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="https://www.w3.org/1999/xlink"
>
  <defs id="defs4">
    <path id="path1" d="M75,20 a1,1 0 0,0 160,0" />
  </defs>
  <text
    x="10"
    y="200"
    style="font-size:18px;fill:#ff0000"
    id="text7"
    transform="matrix(0.86077628,0,0,0.84850441,-58.114189,11.516075)"
  >
    <textPath xlink:href="#path1" id="textPath9">wow @ techbrood</textPath>
  </text>
  <text x="10" y="15" fill="red" transform="rotate(30 20,40)" id="text11">
    I love SVG
  </text>
</svg>

如果是 Android 设备上用 Canvas 绘制的文字，可以通过Canvas.DrawTextOnPath来实现绘制弧度文字的效果。