• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 绘制文本
2
3
4Svg组件还可以绘制文本。
5
6
7## 文本
8
9> **说明：**
10> - 文本的展示内容需要写在元素标签text内，可嵌套tspan子元素标签分段。
11>
12> - 只支持被父元素标签svg嵌套。
13>
14> - 只支持默认字体sans-serif。
15
16通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
17
18
19```html
20<!-- xxx.hml -->
21<div class="container">
22  <svg>
23    <text x="200" y="300" font-size="80px" fill="blue" >Hello World</text>    <text x="200" y="300" dx="20" dy="80" font-size="80px" fill="blue" fill-opacity="0.5" stroke="red" stroke-width="2">Hello World</text>
24    <text x="20" y="550" fill="#D2691E">
25      <tspan dx="40" fill="red" font-size="80" fill-opacity="0.4">Hello World </tspan>
26    </text>
27  </svg>
28</div>
29```
30
31![zh-cn_image_0000001227151887](figures/zh-cn_image_0000001227151887.png)
32
33
34## 沿路径绘制文本
35
36textpath文本内容沿着属性path中的路径绘制文本。
37
38
39```html
40<!-- xxx.hml -->
41<div class="container">
42  <svg fill="#00FF00" x="100" y="400">
43    <path d="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" stroke="red" fill="none"></path>
44      <text>
45        <textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" font-size="30px">
46          This is textpath test.
47        </textpath>
48      </text>
49  </svg>
50</div>
51```
52
53![zh-cn_image_0000001181354262](figures/zh-cn_image_0000001181354262.png)
54