diff --git a/README.md b/README.md
index a67add36ffc4070b7b2eedb2ac95a405b8656f07..df3610d1ad16f6c593385e45c1886c14154821f8 100755
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ We provide a series of app samples to help you quickly get familiar with the API
## Limitations
1. Before installing and running the sample, check the **deviceType** field in the **config.json** file to obtain the device types supported by the sample. You can modify this field to enable the sample to run on your target device. \(The **config.json** file is generally stored in the **entry/src/main** directory, which may be different depending on the samples.\)
-2. If you want to run the app sample on HarmonyOS, configure the development environment by referring to [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387). If you want to run the app sample on OpenHarmony, configure the development environment by referring to [DevEco Studio \(OpenHarmony\) User Guide](https://gitee.com/openharmony/docs/blob/master/en/application-dev/quick-start/deveco-studio-(openharmony)-user-guide.md).
+2. If you want to run the app sample on HarmonyOS, configure the development environment by referring to [HUAWEI DevEco Studio User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387). If you want to run the app sample on OpenHarmony, configure the development environment by referring to [DevEco Studio \(OpenHarmony\) User Guide](https://gitee.com/openharmony/docs/blob/master/en/application-dev/quick-start/Readme-EN.md).
3. The following app samples can run on OpenHarmony, and other app samples can run only on HarmonyOS:
- common/Clock
- common/JsHelloWorld
diff --git a/README_zh.md b/README_zh.md
index 8b1638af3d7f275da57b5d6a4345261becfcc80f..36cb5b5749b4fd98598372252da201d01528da44 100755
--- a/README_zh.md
+++ b/README_zh.md
@@ -18,7 +18,7 @@
## 约束与限制
1. 安装运行应用示例之前，请先通过config.json文件中的"deviceType"字段来确认该应用示例支持的设备类型，可尝试通过修改该字段使其可以在相应类型的设备上运行（config.json文件一般在代码的entry/src/main路径下，不同的Sample可能会有不同）。
-2. 配置开发环境时，如果您想让应用示例运行到HarmonyOS上，请参考[DevEco Studio使用说明](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。如果您想让应用示例运行到OpenHarmony上，请参考[DevEco Studio（OpenHarmony）使用指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/DevEco-Studio%EF%BC%88OpenHarmony%EF%BC%89%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.md)。
+2. 配置开发环境时，如果您想让应用示例运行到HarmonyOS上，请参考[DevEco Studio使用说明](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。如果您想让应用示例运行到OpenHarmony上，请参考[DevEco Studio（OpenHarmony）使用指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/Readme-CN.md)。
3. 以下路径下的应用示例支持在OpenHarmony上运行，其余应用示例仅支持在HarmonyOS上运行。
- common/Clock
- common/JsHelloWorld
diff --git a/UI/JsSvg/README_zh.md b/UI/JsSvg/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..8a089f812b33d42faf790b997efbd5937a78de80
--- /dev/null
+++ b/UI/JsSvg/README_zh.md
@@ -0,0 +1,17 @@
+# JsSvg
+
+
+
+### 简介
+
+本示例展示了JS中组件及其子组件的使用，包括、、、、、、、、、、
+
+### 使用说明
+
+1、首页中的子组件很多，本示例中，在首页显示一个列表，将svg的子组件分为四个列表项展示，点击进入对应的界面可以查看各个子组件的显示效果。
+
+
+
+### 约束与限制
+
+本示例支持标准系统上运行。
diff --git a/UI/JsSvg/build.gradle b/UI/JsSvg/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..ecbb99c45d4bdfa94b95e0b3f021f66b1984e55c
--- /dev/null
+++ b/UI/JsSvg/build.gradle
@@ -0,0 +1,33 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+ compileSdkVersion 7
+ supportSystem "standard"
+}
+
+buildscript {
+ repositories {
+ maven {
+ url 'https://repo.huaweicloud.com/repository/maven/'
+ }
+ maven {
+ url 'https://developer.huawei.com/repo/'
+ }
+ }
+ dependencies {
+ classpath 'com.huawei.ohos:hap:3.0.3.4'
+ }
+}
+
+allprojects {
+ repositories {
+ maven {
+ url 'https://repo.huaweicloud.com/repository/maven/'
+ }
+ maven {
+ url 'https://developer.huawei.com/repo/'
+ }
+ }
+}
diff --git a/UI/JsSvg/entry/build.gradle b/UI/JsSvg/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..8243c3b322a99d4203fb603bab0cafd024091fb7
--- /dev/null
+++ b/UI/JsSvg/entry/build.gradle
@@ -0,0 +1,16 @@
+apply plugin: 'com.huawei.ohos.hap'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+ compileSdkVersion 7
+ defaultConfig {
+ compatibleSdkVersion 7
+ }
+ buildTypes {
+ release {
+ proguardOpt {
+ proguardEnabled false
+ rulesFiles 'proguard-rules.pro'
+ }
+ }
+ }
+}
diff --git a/UI/JsSvg/entry/src/main/config.json b/UI/JsSvg/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..f24c6226e04dfbbab99d5e4a7983c289c62fb7d6
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/config.json
@@ -0,0 +1,66 @@
+{
+ "app": {
+ "bundleName": "ohos.samples.jssvg",
+ "vendor": "samples",
+ "version": {
+ "code": 1000000,
+ "name": "1.0.0"
+ }
+ },
+ "deviceConfig": {},
+ "module": {
+ "package": "ohos.samples.jssvg",
+ "name": ".MyApplication",
+ "mainAbility": ".MainAbility",
+ "deviceType": [
+ "phone"
+ ],
+ "distro": {
+ "deliveryWithInstall": true,
+ "moduleName": "entry",
+ "moduleType": "entry",
+ "installationFree": false
+ },
+ "abilities": [
+ {
+ "skills": [
+ {
+ "entities": [
+ "entity.system.home"
+ ],
+ "actions": [
+ "action.system.home"
+ ]
+ }
+ ],
+ "orientation": "unspecified",
+ "visible": true,
+ "srcPath": "MainAbility",
+ "name": ".MainAbility",
+ "srcLanguage": "js",
+ "icon": "$media:icon",
+ "description": "$string:description_mainability",
+ "formsEnabled": false,
+ "label": "$string:entry_MainAbility",
+ "type": "page",
+ "launchType": "standard"
+ }
+ ],
+ "js": [
+ {
+ "pages": [
+ "pages/index/index",
+ "pages/svg1/svg1",
+ "pages/svg2/svg2",
+ "pages/svg3/svg3",
+ "pages/svg4/svg4"
+ ],
+ "name": ".MainAbility",
+ "window": {
+ "designWidth": 720,
+ "autoDesignWidth": false
+ }
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/app.js b/UI/JsSvg/entry/src/main/js/MainAbility/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..50449ecbed6d3b8099f6f9a1fb66e29bbe2177f0
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/app.js
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ onCreate() {
+ console.info("Application onCreate");
+ },
+ onDestroy() {
+ console.info("Application onDestroy");
+ }
+};
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/common/images/arrow.png b/UI/JsSvg/entry/src/main/js/MainAbility/common/images/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..54ce61a1cd1a15118a8260618ac9494ae6103b18
Binary files /dev/null and b/UI/JsSvg/entry/src/main/js/MainAbility/common/images/arrow.png differ
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/i18n/en-US.json b/UI/JsSvg/entry/src/main/js/MainAbility/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..f7c18efa2fc977f2ad1513ecef194c6744342c67
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/i18n/en-US.json
@@ -0,0 +1,9 @@
+{
+ "strings": {
+ "title": "Svg",
+ "svg1": "circle\nellipse\npath\nline",
+ "svg2": "polyline\npolygon",
+ "svg3": "text\ntspan\ntextPath",
+ "svg4": "animate\nanimateMotion\nnanimateTransform"
+ }
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/i18n/zh-CN.json b/UI/JsSvg/entry/src/main/js/MainAbility/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..9e520910199bb533ab191d0c00063c4b4ce97fe9
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/i18n/zh-CN.json
@@ -0,0 +1,4 @@
+{
+ "strings": {
+ }
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.css b/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ab5e08fc796072f3c20224fefafabffef511f7c1
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.css
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.title {
+ font-size: 42px;
+ color: #FFFFFF;
+ opacity: 0.9;
+ width: 100%;
+ padding: 10px;
+ background-color: dodgerblue;
+ height: 90px;
+}
+
+.list {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.list-item {
+ flex-direction: column;
+}
+
+
+.stack {
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+}
+
+.text {
+ width: 100%;
+ font-size: 45px;
+ color: #000000;
+ opacity: 0.9;
+ padding-left: 10px;
+}
+
+.arrow {
+ width: 80px;
+ object-fit: contain;
+}
+
+.go {
+ width: 100%;
+ flex-direction: row;
+ align-items:center;
+ margin-left: 100px;
+ justify-content: flex-end;
+}
+
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.hml b/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..9c0da613f3ba0f9f53669dc2e7f334f83709e7ec
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.hml
@@ -0,0 +1,54 @@
+
+
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.js b/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e369817e2bf69893adb1ad88d00d8cbc920e5b69
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/index/index.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import router from '@system.router';
+
+export default {
+ data: {
+ title: ""
+ },
+ onInit() {
+ this.title = this.$t('strings.world');
+ },
+ svgOnClick1() {
+ router.push({uri:'pages/svg1/svg1'})
+ },
+ svgOnClick2() {
+ router.push({uri:'pages/svg2/svg2'})
+ },
+ svgOnClick3() {
+ router.push({uri:'pages/svg3/svg3'})
+ },
+ svgOnClick4() {
+ router.push({uri:'pages/svg4/svg4'})
+ }
+}
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.css b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.css
new file mode 100644
index 0000000000000000000000000000000000000000..adef2432c7de984393aaba17bdb05998e392be4c
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.title {
+ font-size: 42px;
+ color: #FFFFFF;
+ opacity: 0.9;
+ width: 100%;
+ padding: 10px;
+ background-color: dodgerblue;
+ height: 90px;
+}
+
+.list {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.list-item {
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 15px;
+}
+
+.text {
+ font-size: 45px;
+ color: #000000;
+ opacity: 0.9;
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.hml b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.hml
new file mode 100644
index 0000000000000000000000000000000000000000..705ce5bc62ce0e3304408e60d699b6518a7e59f4
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.hml
@@ -0,0 +1,65 @@
+
+
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.js b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.js
new file mode 100644
index 0000000000000000000000000000000000000000..32afaa907e7aad67662ec12e1e334429e44e25d2
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg1/svg1.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: 'World'
+ }
+}
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.css b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.css
new file mode 100644
index 0000000000000000000000000000000000000000..adef2432c7de984393aaba17bdb05998e392be4c
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.title {
+ font-size: 42px;
+ color: #FFFFFF;
+ opacity: 0.9;
+ width: 100%;
+ padding: 10px;
+ background-color: dodgerblue;
+ height: 90px;
+}
+
+.list {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.list-item {
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 15px;
+}
+
+.text {
+ font-size: 45px;
+ color: #000000;
+ opacity: 0.9;
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.hml b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.hml
new file mode 100644
index 0000000000000000000000000000000000000000..0a900192875df1b832655ae9069eaaefbfb97566
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.hml
@@ -0,0 +1,35 @@
+
+
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.js b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.js
new file mode 100644
index 0000000000000000000000000000000000000000..32afaa907e7aad67662ec12e1e334429e44e25d2
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg2/svg2.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: 'World'
+ }
+}
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.css b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.css
new file mode 100644
index 0000000000000000000000000000000000000000..adef2432c7de984393aaba17bdb05998e392be4c
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.title {
+ font-size: 42px;
+ color: #FFFFFF;
+ opacity: 0.9;
+ width: 100%;
+ padding: 10px;
+ background-color: dodgerblue;
+ height: 90px;
+}
+
+.list {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.list-item {
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 15px;
+}
+
+.text {
+ font-size: 45px;
+ color: #000000;
+ opacity: 0.9;
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.hml b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d59f194f25a73fd08adc33aa7a14743204d92d1c
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.hml
@@ -0,0 +1,123 @@
+
+
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.js b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.js
new file mode 100644
index 0000000000000000000000000000000000000000..32afaa907e7aad67662ec12e1e334429e44e25d2
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg3/svg3.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: 'World'
+ }
+}
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg4/svg4.css b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg4/svg4.css
new file mode 100644
index 0000000000000000000000000000000000000000..adef2432c7de984393aaba17bdb05998e392be4c
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg4/svg4.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.title {
+ font-size: 42px;
+ color: #FFFFFF;
+ opacity: 0.9;
+ width: 100%;
+ padding: 10px;
+ background-color: dodgerblue;
+ height: 90px;
+}
+
+.list {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.list-item {
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 15px;
+}
+
+.text {
+ font-size: 45px;
+ color: #000000;
+ opacity: 0.9;
+}
\ No newline at end of file
diff --git a/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg4/svg4.hml b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg4/svg4.hml
new file mode 100644
index 0000000000000000000000000000000000000000..690bef5a9f3cfd57888458d1c2daa2731430ec45
--- /dev/null
+++ b/UI/JsSvg/entry/src/main/js/MainAbility/pages/svg4/svg4.hml
@@ -0,0 +1,108 @@
+
+