From 8c6782dc138d2e4c90b20e862048ad2bc286c493 Mon Sep 17 00:00:00 2001 From: yangzx18 Date: Thu, 16 May 2024 17:19:07 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9OVL9]=20svg-capi=E8=A1=A5?= =?UTF-8?q?=E5=85=85=E5=85=AC=E5=85=B1=E5=B1=9E=E6=80=A7=EF=BC=8C=E8=A1=A5?= =?UTF-8?q?=E5=85=85svgxml=E3=80=81svguri=E7=AD=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-svg-capi.md | 79 +++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 2 deletions(-) diff --git a/zh-cn/react-native-svg-capi.md b/zh-cn/react-native-svg-capi.md index 8f70ab43..1a617fb5 100644 --- a/zh-cn/react-native-svg-capi.md +++ b/zh-cn/react-native-svg-capi.md @@ -281,6 +281,7 @@ ohpm install | opacity | 透明度 | number | No | All | Yes | **Defs**：该元素是用于对其他 SVG 元素进行分组的容器 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------: | :--------------------------: | :-------------: | -------- | -------- | ----------------- | | / | / | / | / | All | Yes | @@ -343,6 +344,7 @@ ohpm install | viewBox | 组件视区 | string | No | All | Yes | **ClipPath**：该元素定义一条剪切路径，可作为其他元素的clipPath属性的值 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | :---------: | :--------------------------: | :-------------: | -------- | -------- | ----------------- | | / | / | / | / | All | Yes | @@ -361,13 +363,86 @@ ohpm install | markerWidth | 表示标记进入的视窗的宽度 | number\| string | No | All | Yes | | markerHeight | 表示标记进入的视窗的高度 | number\| string | No | All | Yes | +**SvgAst**：该组件通过传入ast来渲染出svg + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------: | :--------------------------: | :-------------: | :------: | :------: | :---------------: | +| ast | 解析svg字符串得到的ast树 | JsxAST | Yes | All | Yes | +| override | 覆盖svg样式，如宽高 | object | No | All | Yes | +| onError | 错误时触发 | function | No | All | Yes | +| onLoad | 加载成功后触发 | function | No | All | Yes | +| fallback | 加载中元素 | function | No | All | | + +**SvgFromUri**：该组件通过传入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 | | + +**SvgFromXml**：该组件通过传入字符串来渲染出svg + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------: | :-----------------: | :------: | :------: | :------: | :---------------: | +| xml | 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 | | + +**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 | | + +**函数** + +| 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 组件属性鸿蒙侧支持情况 | Name | Description | Type | Default | Required | Platform | G | Path | Rect | Circle | Polygon | -| :---------: | :----------------------------------: | :----: | :-----: | :------: | -------- | --- | ---- | ---- | ------ | ------- | +| :---------: | :----------------------------------: | :----: | :-----: | :------: | :------: | --- | ---- | ---- | ------ | ------- | | fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ | √ | √ | -| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ | √ | √ | +| fillOpacity | 设置填充区域透明度 | number | 1 | No | All | | √ | √ | √ | √ | +| fillRule | 设置填充规则 | number | 1 | 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 | | | | | | +| clipRule | 将元素进行剪切的规则 | string | evenodd | No | All | | | | | | +| clipPath | 将元素进行剪切 | string | - | 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坐标 | number | 0 | No | All | | | | | | +| originY | 更改一个元素变形的原点y坐标 | 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 | | | | | | ## 遗留问题 -- Gitee