# react-native-harmony-svg **Repository Path**: rn_oh_lib/react-native-harmony-svg ## Basic Information - **Project Name**: react-native-harmony-svg - **Description**: react-native-harmony-svg - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: ty_release - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-28 - **Last Updated**: 2025-09-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > 模板版本：v0.2.2

react-native-svg(CAPI)

Supported platforms License

> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-harmony-svg) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-harmony-svg/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： #### **npm** ```bash npm install react-native-svg@15.0.0 npm install @react-native-oh-tpl/react-native-svg ``` #### **yarn** ```bash yarn add react-native-svg@15.0.0 yarn add @react-native-oh-tpl/react-native-svg ``` 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 ```js import React from 'react'; import { StyleSheet,SafeAreaView } from 'react-native'; import { Svg,Path } from 'react-native-svg'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex:1, backgroundColor: 'grey', }, }); ``` ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```json { ... "overrides": { "@rnoh/react-native-openharmony" : "./react_native_openharmony" } } ``` ### 2.引入原生端代码 目前有两种方法： 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 方法一：通过 har 包引入 > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-oh-tpl/react-native-svg": "file:../../node_modules/@react-native-oh-tpl/react-native-svg/harmony/svg.har" } ``` 点击右上角的 `sync` 按钮 或者在终端执行： ```bash cd entry ohpm install ``` 方法二：直接链接源码 > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) ### 3.配置 CMakeLists 和引入 SVGPackage 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") + set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") set(LOG_VERBOSITY_LEVEL 1) set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use add_compile_definitions(WITH_HITRACE_SYSTRACE) add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-svg/src/main/cpp" ./svg) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") add_library(rnoh_app SHARED ${GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_BEGIN: manual_package_linking_2 target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_svg) # RNOH_END: link_packages ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff #include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" + #include "SVGPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), std::make_shared(ctx), + std::make_shared(ctx), }; } ``` ### 4.在 ArkTs 侧引入 SvgPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... + import { SvgPackage } from '@react-native-oh-tpl/react-native-svg/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), + new SvgPackage(ctx), ]; } ``` ### 5.运行 点击右上角的 `sync` 按钮 或者在终端执行： ```bash cd entry ohpm install ``` 然后编译、运行即可。 ### 7.字节码格式的release包使用 执行完'npm install react-native-svg@15.0.0；npm install @react-native-oh-tpl/react-native-svg'命令后，在生成的node_modules/@react-native-oh-tpl/react-native-svg中即可获取release包。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) set(NATIVERENDER_ROOT_PATH "${CMAKE_CURRENT_SOURCE_DIR}") set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/include") set(REACT_COMMON_PATCH_DIR "${RNOH_CPP_DIR}/patches/react_native_core") set(CMAKE_CXX_STANDARD 17) set(LOG_VERBOSITY_LEVEL 1) set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie -DNDEBUG") set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use add_compile_definitions(WITH_HITRACE_SYSTRACE) # folly的编译选项 set(folly_compile_options -DFOLLY_NO_CONFIG=1 -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_HAVE_RECVMMSG=1 -DFOLLY_HAVE_PTHREAD=1 -Wno-comma -Wno-shorten-64-to-32 -Wno-documentation -faligned-new ) add_compile_options("-Wno-unused-command-line-argument") # 添加头文件目录 include_directories(${NATIVERENDER_ROOT_PATH} ${RNOH_CPP_DIR} ${REACT_COMMON_PATCH_DIR} ${RNOH_CPP_DIR}/third-party/folly ${RNOH_CPP_DIR}/third-party/rn/ReactCommon ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/nativemodule/core ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/jsi ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/callinvoker ${RNOH_CPP_DIR}/third-party/boost/libs/utility/include ${RNOH_CPP_DIR}/third-party/boost/libs/stacktrace/include ${RNOH_CPP_DIR}/third-party/boost/libs/predef/include ${RNOH_CPP_DIR}/third-party/boost/libs/array/include ${RNOH_CPP_DIR}/third-party/boost/libs/throw_exception/include ${RNOH_CPP_DIR}/third-party/boost/libs/config/include ${RNOH_CPP_DIR}/third-party/boost/libs/core/include ${RNOH_CPP_DIR}/third-party/boost/libs/preprocessor/include ${RNOH_CPP_DIR}/third-party/double-conversion ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/renderer/graphics/platform/cxx ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/runtimeexecutor ${RNOH_CPP_DIR}/third-party/glog/src ${RNOH_CPP_DIR}/third-party/boost/libs/mpl/include ${RNOH_CPP_DIR}/third-party/boost/libs/type_traits/include ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/yoga ${RNOH_CPP_DIR}/third-party/boost/libs/intrusive/include ${RNOH_CPP_DIR}/third-party/boost/libs/assert/include ${RNOH_CPP_DIR}/third-party/boost/libs/move/include ${RNOH_CPP_DIR}/third-party/boost/libs/static_assert/include ${RNOH_CPP_DIR}/third-party/boost/libs/container_hash/include ${RNOH_CPP_DIR}/third-party/boost/libs/describe/include ${RNOH_CPP_DIR}/third-party/boost/libs/mp11/include ${RNOH_CPP_DIR}/third-party/boost/libs/iterator/include ${RNOH_CPP_DIR}/third-party/boost/libs/detail/include ${RNOH_CPP_DIR}/patches/react_native_core/react/renderer/textlayoutmanager/platform/harmony + ${OH_MODULE_DIR}/@react-native-oh-tpl/react-native-svg/include ) configure_file( ${RNOH_CPP_DIR}/third-party/folly/CMake/folly-config.h.cmake ${RNOH_CPP_DIR}/third-party/folly/folly/folly-config.h ) file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") # 添加rnoh动态共享包 add_library(rnoh SHARED "${RNOH_CPP_DIR}/RNOHOther.cpp" "${RNOH_CPP_DIR}/third-party/folly/folly/lang/SafeAssert.cpp" ) # 链接其他so target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@rnoh/react-native-openharmony/libs/arm64-v8a) + target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@react-native-oh-tpl/react-native-svg/libs/arm64-v8a) target_link_libraries(rnoh PUBLIC rnoh_semi libace_napi.z.so libace_ndk.z.so librawfile.z.so libhilog_ndk.z.so libnative_vsync.so libnative_drawing.so libc++_shared.so libhitrace_ndk.z.so react_render_scheduler rrc_image rrc_text rrc_textinput rrc_scrollview react_nativemodule_core react_render_animations jsinspector hermes jsi logger react_config react_debug react_render_attributedstring react_render_componentregistry react_render_core react_render_debug react_render_graphics react_render_imagemanager react_render_mapbuffer react_render_mounting react_render_templateprocessor react_render_textlayoutmanager react_render_telemetry react_render_uimanager react_utils rrc_root rrc_view react_render_leakchecker react_render_runtimescheduler runtimeexecutor + rnoh_svg ) if("$ENV{RNOH_C_API_ARCH}" STREQUAL "1") message("Experimental C-API architecture enabled") target_link_libraries(rnoh PUBLIC libqos.so) target_compile_definitions(rnoh PUBLIC C_API_ARCH) endif() # 添加rnoh_app共享包 add_library(rnoh_app SHARED ${GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHOther.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_END: link_packages target_compile_options(rnoh_app PUBLIC ${folly_compile_options} -DRAW_PROPS_ENABLED -std=c++17) ``` 字节码格式的release包是指在release模式下编译出来、ets文件转换成了.abc、C++源码转换成.so的har包。 需要注意： 使用字节码格式的release包需要将工程级的 build-profile.json5 文件中将 useNormalizedOHMUrl 设置为 true，如： ```diff "products": [ { "name": "default", "signingConfig": "default", "compatibleSdkVersion": "5.0.1(13)", "runtimeOS": "HarmonyOS", + "buildOption": { + "strictMode": { + "useNormalizedOHMUrl": true + } + } } ], ``` ### 在 ArkTs 侧引入和注册字体文件(非必选配置项) > [!TIP] 本项非必配项，当使用 Text 组件的 fontFamily 属性指定字体时才需配置 步骤一： 复制字体文件到 `entry/src/main/resources/rawfile/assets/fonts` 目录下(如使用了外部字体文件，需要将*.ttf文件复制过来) 步骤二： 打开 `entry/src/main/ets/pages/Index.ets`，添加以下代码 const fonts: Record = { "Noto Sans Pau Cin Hau": $rawfile("assets/fonts/Noto Sans Pau Cin Hau.ttf") , "NotoSansVai-Regular": $rawfile("assets/fonts/NotoSansVai-Regular.ttf") , "HarmonyOS_Sans_Condensed_Regular_Italic": $rawfile("assets/fonts/HarmonyOS_Sans_Condensed_Regular_Italic.ttf") "HarmonyOS_Sans_Digit_Medium": $rawfile("assets/fonts/HarmonyOS_Sans_Digit_Medium.ttf") } @Entry @Component struct Index { //... build() { Column(){ //... //注册字体文件 RNApp({ rnInstanceConfig: { //... fontResourceByFontFamily: fonts }, //... } } //... } ## 约束与限制 ### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-svg Releases](https://github.com/react-native-oh-library/react-native-harmony-svg/releases) ## 属性 详细请查看 [react-native-svg 的文档介绍](https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md) 以下为目前已支持的组件属性： > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 **Svg**：绘制组件的父组件 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :------------------: | :-------------: | :------: | :------: | :---------------: | | width | 组件宽度 | number\| string | Yes | All | Yes | | height | 组件高度 | number\| string | Yes | All | Yes | | viewBox | 组件视区 | string | No | All | Yes | | color | 颜色 | string | No | All | Yes | | title | 组件标题名 | string | No | All | Yes | | preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes | **G**：该元素是用于对其他 SVG 元素进行分组的容器 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------: | :-------------: | -------- | -------- | ----------------- | | opacity | 透明度 | number\| string | No | All | Yes | **Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :------------------: | :----: | -------- | -------- | ----------------- | | d | 路径绘制的命令字符串 | string | Yes | All | Yes | | opacity | 透明度 | number | No | All | Yes | **Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------------: | :-------------: | -------- | -------- | ----------------- | | x | 在 x 轴上平移距离 | number\| string | No | All | Yes | | y | 在 y 轴上平移距离 | number\| string | No | All | Yes | | width | 元素宽度 | number\| string | Yes | All | Yes | | height | 元素高度 | number\| string | Yes | All | Yes | | rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | | ry | 定义 y 轴上的半径 | number\| string | No | All | Yes | | opacity | 透明度 | number\| string | No | All | Yes | **Image**： 图像元素，支持 JPEG、PNG 格式 > [!WARNING] > > 注： Image 依赖 Canary3 Sp2 以上版本的 SDK 和 ROM。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------------------------------------: | :------------------------------: | -------- | -------- | ----------------- | | x | 在 x 轴上平移距离 | number\| string | No | All | Yes | | y | 在 y 轴上平移距离 | number\| string | No | All | Yes | | width | 元素宽度 | number\| string | Yes | All | Yes | | height | 元素高度 | number\| string | Yes | All | Yes | | href | 图像资源引用 | source\| string | Yes | All | Yes | | xlinkHref | 用于指定要嵌入的图像的 URL | RNImageProps['source'] \| string | No | All | Yes | | preserveAspectRatio | 控制在给定的容器尺寸内如何保持图像的宽高比 | string | No | All | Yes | | opacity | 透明度 | source\| string | No | All | Yes | **Circle**： 园绘制组件，基于圆心和半径生成园形形状 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :-------------------: | :-------------: | -------- | -------- | ----------------- | | r | 园半径 | number\| string | Yes | All | Yes | | cx | 圆心在 x 轴上平移距离 | number\| string | No | All | Yes | | cy | 圆心在 y 轴上平移距离 | number\| string | No | All | Yes | | opacity | 透明度 | number | No | All | Yes | **Polygon**： 多边形制组件，用于创建至少包含三条边的图形 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :----------------------------: | :------------: | -------- | -------- | ----------------- | | points | 定义多边形每个角的 x 和 y 坐标 | string\| array | Yes | All | Yes | | opacity | 透明度 | number | No | All | Yes | **Polyline**： 多段线组件，用于创建一条线段构成的轨迹 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :------------------------------: | :------------: | -------- | -------- | ----------------- | | points | 定义多段线每个端点的 x 和 y 坐标 | string\| array | Yes | All | Yes | | opacity | 透明度 | number | No | All | Yes | **Defs**：该元素是用于对其他 SVG 元素进行分组的容器 > 注： 该组件无属性 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--: | :---------: | :--: | -------- | -------- | ----------------- | | / | / | / | / | All | Yes | **LinearGradient**：用于定义线性渐变 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------------: | :------------------------------------: | :-------------------------------------: | -------- | -------- | ----------------- | | x1 | 在 x 轴上平移距离 | number\| string | No | All | Yes | | y1 | 在 y 轴上平移距离 | number\| string | No | All | Yes | | x2 | 在 x 轴上平移距离 | number\| string | No | All | Yes | | y2 | 在 y 轴上平移距离 | number\| string | No | All | Yes | | gradientUnits | 指定元素属性使用的坐标系 | 'userSpaceOnUse' \| 'objectBoundingBox' | No | All | Yes | | gradientTransform | 指定从元素当前坐标系到目标坐标系的转换 | ColumnMajorTransformMatrix \| string | No | All | Yes | **RadialGradient**：用于定义线性渐变 > [!WARNING] > > 注： RadialGradient 依赖 Canary3 Sp2 以上版本的 SDK 和 ROM。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------------: | :------------------------------------: | :-------------------------------------: | -------- | -------- | ----------------- | | fx | 起始圆的 x 轴坐标 | number\| string | No | All | Yes | | fy | 起始圆的 y 轴坐标 | number\| string | No | All | Yes | | rx | 终止椭圆的 x 轴半径 | number\| string | No | All | Yes | | ry | 终止椭圆的 y 轴半径 | number\| string | No | All | Yes | | cx | 终止圆的 x 轴坐标 | number\| string | No | All | Yes | | cy | 终止圆的 y 轴坐标 | number\| string | No | All | Yes | | r | 终止圆的半径 | number\| string | No | All | Yes | | gradientUnits | 指定元素属性使用的坐标系 | 'userSpaceOnUse' \| 'objectBoundingBox' | No | All | Yes | | gradientTransform | 指定从元素当前坐标系到目标坐标系的转换 | ColumnMajorTransformMatrix \| string | No | All | Yes | **Stop**：定义渐变上的颜色坡度 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------: | :------------: | :----: | -------- | -------- | ----------------- | | stopColor | 渐变色 | string | No | All | Yes | | stopOpacity | 渐变色透明度 | string | No | All | Yes | | offset | 渐变色相对位置 | string | No | All | Yes | **Mask**：定义 alpha 蒙版，用于将当前对象合成到背景中 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------------: | ---------------------------------------------------------------------------------------------------------- | ---------- | -------- | -------- | :---------------: | | id | 唯一标识 | string | No | All | Yes | | x | 左侧顶角横坐标 | NumberProp | No | All | Yes | | y | 左侧顶角纵坐标 | NumberProp | No | All | Yes | | width | 元素宽度 | NumberProp | No | All | Yes | | height | 元素高度 | NumberProp | No | All | Yes | | maskUnits | 定义 x,y,width,height 使用的坐标系，默认值为 objectBoundingBox，可以使用 objectBoundingBox\|userSpaceOnUse | TMaskUnits | No | All | Yes | | maskContentUnits | 定义内容使用的坐标系，默认值为 userSpaceOnUse，可以使用 objectBoundingBox\|userSpaceOnUse | TMaskUnits | No | All | Yes | **Use**：该元素可以重复使用 SVG 元素 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------: | :----------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | x | 在 x 轴上平移距离 | number\| string | No | All | Yes | | y | 在 y 轴上平移距离 | number\| string | No | All | Yes | | width | 元素宽度 | number\| string | No | All | Yes | | height | 元素高度 | number\| string | No | All | Yes | | href | 图像资源引用 | source\| string | Yes | All | Yes | | xlinkHref | 指定了一个 URI，该 URI 指向了 SVG 文档中定义的一个元素 | string | No | All | Yes | | opacity | 透明度 | number\| string | No | All | Yes | **Ellipse**： 椭圆绘制组件，基于一个中心坐标以及它们的 x 半径和 y 半径 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :-------------------: | :-------------: | -------- | -------- | ----------------- | | cx | 圆心在 x 轴上平移距离 | number\| string | No | All | Yes | | cy | 圆心在 y 轴上平移距离 | number\| string | No | All | Yes | | rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | | ry | 定义 y 轴上的半径 | number\| string | No | All | Yes | | opacity | 透明度 | number\| string | No | All | Yes | **Symbol**： 该元素用来定义一个图形模板对象，它可以用一个元素实例化 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :------------------: | :-------------: | -------- | -------- | ----------------- | | preserveAspectRatio | 是否强制进行统一缩放 | string | No | All | Yes | | viewBox | 组件视区 | string | No | All | Yes | **ClipPath**：该元素定义一条剪切路径，可作为其他元素的 clipPath 属性的值 > 注： 该组件无属性 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--: | :---------: | :--: | -------- | -------- | ----------------- | | / | / | / | / | All | Yes | **Marker**：用于在绘制类组件上添加标记 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :----------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | viewBox | 视窗在用户空间中的位置和尺寸 | string | No | All | Yes | | refX | 标记参考点的 x 坐标 | number\| string | No | All | Yes | | refY | 标记参考点的 y 坐标 | number\| string | No | All | Yes | | markerUnits | markerWidth 和 markerHeight 属性的坐标系以及标记的内容 | string | No | All | Yes | | orient | 将标记放置在形状上的相应位置时如何旋转 | string | No | All | Yes | | markerWidth | 表示标记进入的视窗的宽度 | number\| string | No | All | Yes | | markerHeight | 表示标记进入的视窗的高度 | number\| string | No | All | Yes | **Pattern**：用于定义一个图形对象，可以被引用以平铺重绘该图形对象以覆盖某个区域。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :-----------------------------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | x | 标记参考点的 x 坐标 | number\| string | No | All | Yes | | y | 标记参考点的 y 坐标 | number\| string | No | All | Yes | | width | 表示标记进入的视窗的宽度 | number\| string | No | All | Yes | | height | 表示标记进入的视窗的高度 | number\| string | No | All | Yes | | patternUnits | 属性指示 pattern 元素的几何属性使用哪个坐标系。 | string | No | All | Yes | | patternContentUnit | 属性指示 pattern 元素的几何属性使用哪个坐标系。 | string | No | All | Yes | | patternTransform | 定义了应用于图案图块的变换定义的列表 | string | No | All | Yes | | viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes | | preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes | **Symbol**：用于定义可由 use 元素实例化的图形模板对象。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------: | :-----------------------------------------------------------------------: | :-------------: | -------- | -------- | ----------------- | | id | 为元素分配唯一的名称 | string | Yes | All | Yes | | viewBox | 定义视窗在用户空间中的位置和尺寸 | string | No | All | Yes | | preserveAspectRatio | 指示具有提供给定宽高比的 viewBox 的元素必须如何适应具有不同宽高比的视口。 | string | No | All | Yes | **Line**：SVG 基本形状，用于创建连接两点的线。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :--------------: | :-------------: | -------- | -------- | ----------------- | | x1 | x 轴上线条的起点 | number\| string | No | All | Yes | | y1 | y 轴上的线的起点 | number\| string | No | All | Yes | | x2 | x 轴上的线的末端 | number\| string | No | All | Yes | | y2 | y 轴上的线的末端 | number\| string | No | All | Yes | | opacity | 透明度 | number\| string | No | All | Yes | **Text**：绘制由文本组成的图形元素 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------: | :------------------------------: | :-------------: | -------- | -------- | ----------------- | | x | 文本基线起点的 x 坐标 | number\string | No | All | Yes | | y | 文本基线起点的 y 坐标 | number\string | No | All | Yes | | dx | 从前一个文本元素水平移动文本位置 | number\string | No | All | Yes | | dy | 从前一个文本元素垂直移动文本位置 | number\| string | No | All | Yes | | rotate | 旋转每个单独字形的方向 | array | No | All | Yes | | opacity | 透明度 | number | No | All | Yes | | inlineSize | 水平或垂直尺寸 | number | No | All | No | | alignmentBaseline | 指定文本的对齐基线 | string | NO | ALL | Yes | | baselineShift | 设置垂直位置调整 | number\| string | No | All | Yes | | lengthAdjust | 调整文本以适应特定的布局约束 | string | No | All | Yes | | textLength | 指定文本应该被渲染的长度 | number | No | All | Yes | **TSpan**：绘制文本或 Text 内的子文本 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------: | :------------------------------: | :-------------: | -------- | -------- | ----------------- | | x | 文本基线起点的 x 坐标 | number\string | No | All | Yes | | y | 文本基线起点的 y 坐标 | number\string | No | All | Yes | | dx | 从前一个文本元素水平移动文本位置 | number\string | No | All | Yes | | dy | 从前一个文本元素垂直移动文本位置 | number\| string | No | All | Yes | | rotate | 旋转每个单独字形的方向 | array | No | All | Yes | | opacity | 透明度 | number | No | All | Yes | | inlineSize | 水平或垂直尺寸 | number | No | All | Yes | **TextPath**：若要沿路径形状呈现文本，将文本括在具有 href 属性的 TextPath 元素中，并引用 Path 元素。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------: | :--------------------------------: | :-------------: | -------- | -------- | ----------------- | | href | 用于呈现文本的路径或基本形状的 URL | string | No | All | No | | xlinkHref | 用于呈现文本的路径或基本形状的 URL | string | No | All | No | | method | 沿路径渲染各个字形的方法 | string | No | All | No | | spacing | 绘制字符之间的间距 | string | No | All | No | | side | 文本应呈现在路径的哪一侧 | string | No | All | No | | midLine | 中线 | string | No | All | No | | startOffset | 文本开始被沿着路径绘制时的偏移量 | number\| string | No | All | No | **SvgAst**：该组件通过传入 ast 来渲染出 svg | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :--------------------------: | :------: | :------: | :------: | :---------------: | | ast | 解析 svg 字符串得到的 ast 树 | JsxAST | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | **SvgFromUri**：该组件通过传入 uri 地址来渲染出 svg | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :------: | :------: | :------: | :---------------: | | uri | svg 资源地址 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | **SvgFromXml**：该组件通过传入字符串来渲染出 svg | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :------: | :------: | :------: | :---------------: | | xml | svg 代码的字符串 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | **SvgXml**：该组件通过传入字符串来渲染出 svg | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :------: | :------: | :------: | :---------------: | | xml | svg 代码的字符串 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | **SvgUri**：该组件通过传入 uri 地址来渲染出 svg | Name | Description | Type | Required | Platform | HarmonyOS Support | | :------: | :-------------------: | :------: | :------: | :------: | :---------------: | | uri | svg 资源地址 | string | Yes | All | Yes | | override | 覆盖 svg 样式，如宽高 | object | No | All | Yes | | onError | 错误时触发 | function | No | All | Yes | | onLoad | 加载成功后触发 | function | No | All | Yes | | fallback | 加载中元素 | function | No | All | Yes | **函数** | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------: | :------------------------: | :------: | :------: | :------: | :---------------: | | parse | 将 svg 字符串解析成 JsxAST | function | No | All | Yes | | err | 打印日志 | function | No | All | Yes | | camelCase | 字符串首字母转成大写 | function | No | All | Yes | | fetchText | 将 svg 字符串解析成 JsxAST | function | No | All | Yes | **公共属性**： Common props 组件属性 HarmonyOS 侧支持情况 | Name | Description | Type | Default | Required | Platform | | :--------------: | :-----------------------------------------: | :---------: | :-------: | :------: | :------: | | fill | 设置填充区域颜色 | string | '#000' | No | All | | fillOpacity | 设置填充区域透明度 | number | 1 | No | All | | fillRule | 设置填充规则 | number | 1 | No | All | | clipRule | 设置裁剪规则 | string | 'evenodd' | No | All | | clipPath | 指定、关联一条裁剪路径 | string | 'none' | No | All | | stroke | 设置边框颜色，不设置时，默认没有边框 | string | none | No | All | | strokeWidth | 设置边框宽度 | number | 1 | No | All | | strokeOpacity | 边框透明度 | number | 1 | No | All | | strokeDasharray | 用来描边的点划线的图案范式 | number | none | No | All | | strokeDashoffset | 指定了 dash 模式到路径开始的距离 | number | 1 | No | All | | strokeLinecap | 设置路径两端的形状 | string | butt | No | All | | strokeLinejoin | 指明路径的转角处使用的形状 | string | miter | No | All | | strokeMiterlimit | 对斜接长度和 stroke-width 的比率设置极限 值 | number | 4 | No | All | | vectorEffect | 指明绘制对象时要使用的矢量效果 | string | none | No | All | | translate | 设置位移 | numberArray | 0,0 | No | All | | translateX | 设置 x 轴位移 | number | 0 | No | All | | translateY | 设置 y 轴位移 | number | 0 | No | All | | origin | 更改一个元素变形的原点 | numberArray | 0,0 | No | All | | originX | 更改一个元素变形的原点 x 坐标（单独使用无效，需配合其他属性如 rotation 使用） | number | 0 | No | All | | originY | 更改一个元素变形的原点 y 坐标（单独使用无效，需配合其他属性如 rotation 使用） | number | 0 | No | All | | scale | 定义缩放大小 | numberArray | 1，1 | No | All | | scaleX | 定义 x 轴缩放大小 | number | 1 | No | All | | scaleY | 定义 y 轴缩放大小 | number | 1 | No | All | | rotation | 设置旋转角度 | number | 0，0 | No | All | | x | 标识一个 x 轴坐标 | number | 0 | No | All | | y | 标识一个 y 轴坐标 | number | 0 | No | All | | transform | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All | | marker | 指定路径所有顶点的路标样式 | string | - | No | All | | markerStart | 指定路径起点所采用的路标样式 | string | - | No | All | | markerMid | 指定路径中间顶点所采用的路标样式 | string | - | No | All | | markerEnd | 指定路径终点所采用的路标样式 | string | - | No | All | | mask | 给元素指定使用 Mask 元素实现遮罩效果 | string | - | No | All | | id | 设置节点 id | string | - | No | All | | opacity | 设置透明度 | number | 1 | No | All | | transform | 定义应用于元素及其子元素的变换规则列表 | string | - | No | All | | display | 控制元素展示的方式 | string | block | No | All | | pointerEvents | 设置元素如何响应点击事件 | string | | No | All | | vectorEffect | 指明绘制对象时要使用的矢量效果 | Int | 0 | No | All | FontProps 组件属性 HarmonyOS 侧支持情况 | Name | Description | Type | Default | Required | Platform | | :-------------------: | :------------------------------------------------------------: | :----------------: | :-----: | :------: | :------: | | fontSize | 在多行布局环境中将多行文本设置为实线时，从基线到基线的字体大小 | string | medium | No | All | | fontWeight | 用于呈现文本的字形相对于同一字体族中的其他字体的粗度或亮度 | string | normal | No | All | | font | 设置一个用于文字布局的字体 | FontObject（对象） | none | No | All | | fontStyle | 指定文本渲染样式 | string | normal | No | All | | fontVariant | 设置文本字体变体 | | | No | All | | fontStretch | 控制字体拉伸程度 | string | normal | No | All | | fontFamily | 指定文本字体 | string | normal | No | All | | textAnchor | 用于指定文本相对于其锚点的对齐方式 | string | start | No | All | | textDecoration | 设置文本装饰效果 | string | - | No | All | | letterSpacing | 设置字符间距或字母间距 | number | 1 | No | All | | wordSpacing | 设置英文单词之间的距离 | number | 1 | No | All | | kerning | 设置字符之间的间距 | number | 0 | No | All | | fontFeatureSettings | 字体特性控制 | string | normal | No | All | | fontVariantLigatures | 控制文本中连字 | string | normal | No | All | | fontVariationSettings | 设置字体的宽度、高度、倾斜度等 | string | normal | No | All | ## 遗留问题 - [ ] isPointInFill 判断点位坐标是否在fill上 未实现 - [ ] isPointInStroke 判断点位坐标是否在stroke上 未实现 - [ ] getTotalLength 获取总path的长度 未实现 - [ ] getPointAtLength 获取点位坐标在path上的信息 未实现 - [ ] getBBox 获取组件的边界信息 未实现 - [ ] getCTM 获取相对于父组件的matrix矩阵信息 未实现 - [ ] getScreenCTM 获取组件的matrix矩阵信息 未实现 - [ ] getRawResource 获取android中的资源文件 未实现 - [ ] foreignObject 该组件允许svg使用外部组件 未实现 - [ ] filter 该组件可以为 SVG 图形添加各种视觉效果 未实现 - [ ] TextPath 功能未完全实现 - [ ] Text,TSpan组件的rotate,fontFamily,wordSpacing属性 未实现 ## 其他 ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-svg/blob/harmony/LICENSE) ，请自由地享受和参与开源。