Fork me on GitHub

svg-文本

svg 可以使用 <text><tspan> 来创建文本。

1. 位置

  • x、y 决定了文本在视图中显示的位置
  • dx、dy 用于设置文本相对于当前位置的偏移量
  • 如果 dx、dy 的值是多个值,则从第二个值开始,表示文本内字符的间距

    2. 对齐

  • text-anchor: 设置水平对齐,包括:start middle end inherit

  • dominant-baseline: 设置垂直对齐,包括:auto central middle text-before-edge text-after-edge…

3. 样式

  • 可以使用:fill stroke stroke-width opacity 等 svg 属性
  • 可以使用:font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing、text-decoration 等属性

4. tspan

  • tspan 必须是一个 text 元素或其他 tspan 元素的子元素
  • x 为容器设置一个新绝对 x 坐标,它覆盖了默认的当前的文本位置。这个属性可以包含一个数列,他们将一个一个的应用到 tspan 元素内的每一个字符上(y 同理)
  • dx 从当前位置,用一个水平偏移开始绘制文本。这里,可以提供一个值数列,可以应用到连续的字体,因此每次累计一个偏移(dy 同理)
  • rotate 把所有字符旋转一个角度。如果是一个数列,则使每个字符分别旋转到那个值,剩下的字符根据最后一个值旋转

5. textPath

  • 元素利用路径文本 textPath 的 xlink:href 属性取得一个任意路径,把字符对齐到路径
  • 使用 textPath 时, x 位置路径,y 无效
  • startOffset 确定排列的起始位置

6. 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<svg viewBox='0 0 800 200' width='800' height='200' style='border: 1px solid'>
<polyline points="60 20, 60 80" fill="transparent" stroke="black"/>
<text x="60" y="20" text-anchor="start">start</text>
<text x="60" y="20" text-anchor="start">start</text>
<text x="60" y="50" text-anchor="middle">middle</text>
<text x="60" y="80" text-anchor="end">end</text>
<polyline points="10 150, 790 150" fill="transparent" stroke="black"/>
<text x="0" y="150" dominant-baseline="start">start</text>
<text x="0" y="150" dominant-baseline="start">start</text>
<text x="50" y="150" dominant-baseline="central">central</text>
<text x="120" y="150" dominant-baseline="middle">middle</text>
<text x="180" y="150" dominant-baseline="text-before-edge">text-before-edge</text>
<text x="250" y="150" dominant-baseline="text-after-edge">text-after-edge</text>
<text x="380" y="150" dominant-baseline="no-change">no-change</text>
<text x="470" y="150" dominant-baseline="hanging">hanging</text>
<text x="530" y="150" dominant-baseline="reset-size">reset-size</text>
<text x="620" y="150" dominant-baseline="ideographic">ideographic</text>
</svg>

<svg viewBox='0 0 400 200' width='400' height='200' style='border: 1px solid'>
<text x='20' y='50' stroke='red' font-size='60px' font-weight='bold' fill='none' letter-spacing='3' stroke-width='0.5'>leo</text>
<text x='20' y='100' font-size='18'>
<tspan font-weight="bold" font-size='30'>leo</tspan>weiy
</text>
<text x="20" y="150">
leo<tspan x="100 100" y="150 130 110" dx="0 10 10 10 10 10" dy='0 10 10' rotate="15 15 60" font-size='20' font-weight="bold" >weiy</tspan>
</text>
</svg>

<svg viewBox='0 0 400 200' width='400' height='200' style='border: 1px solid'>
<path id="my_path" d="M20 40, Q100 100 200 40" fill="none" stroke='red' />
<text x='10'>
<textPath startOffset='10%' xlink:href="#my_path">casstime bricks</textPath>
</text>
</svg>

学习链接

-------------本文结束感谢您的阅读-------------