• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 基础知识
2
3
4Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使用。具体用法请参考[Svg](../reference/arkui-js/js-components-svg.md)。
5
6
7> **说明：**
8> - 从API version 7开始支持。
9>
10> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
11
12
13## 创建Svg组件
14
15在pages/index目录下的hml文件中创建一个Svg组件。
16
17
18```html
19<!-- xxx.hml -->
20<div class="container">
21  <svg width="400" height="400">  </svg>
22</div>
23```
24
25
26```css
27/* xxx.css */
28.container{
29  width: 100%;
30  height: 100%;
31  flex-direction: column;
32  align-items: center;
33  justify-content: center;
34  background-color: #F1F3F5;
35}
36svg{
37  background-color: blue;
38}
39```
40
41![zh-cn_image_0000001218280036](figures/zh-cn_image_0000001218280036.png)
42
43
44## 设置属性
45
46通过设置width、height、x、y和viewBox属性为Svg设置宽度、高度、x轴坐标、y轴坐标和Svg视口。
47
48
49```html
50<!-- xxx.hml -->
51<div class="container">
52  <svg width="400" height="400" viewBox="0 0 100 100">
53    <svg class="rect" width="100" height="100" x="20" y="10">
54    </svg>
55  </svg>
56</div>
57```
58
59
60```css
61/* xxx.css */
62.container{
63  width: 100%;
64  height: 100%;
65  flex-direction: column;
66  align-items: center;
67  justify-content: center;
68  background-color: #F1F3F5;
69}
70svg{
71  background-color: yellow;
72}
73.rect{
74  background-color: red;
75}
76```
77
78![zh-cn_image_0000001218599996](figures/zh-cn_image_0000001218599996.png)
79
80> **说明：**
81> - x和y设置的的是当前Svg的x轴和y轴坐标，如果当前Svg为根节点，x轴和y轴属性无效。
82>
83> - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。
84
85