Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“c6ce73bbe017f6d776c0c829c739410b231f1d49”上不存在“en/application-dev/ui/ui-js-components-chart.md”
提交 151a10dd 编写于 作者: W wangshuainan
浏览文件
操作

updata svg 

Signed-off-by: Nwangshuainan <wangshuainan1@huawei.com>
上级 56ab6d24
展开全部 隐藏空白更改
内联 并排
Showing with 179 addition and 176 deletion
zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md
浏览文件 @ 151a10dd
# circle # circle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
圆形形状。 圆形形状。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="400" height="400"> <svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
浏览文件 @ 151a10dd
# 通用属性 # 通用属性
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
| stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length]，短划线和缺口的长度中间空格隔开成对出现。 | | stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length]，短划线和缺口的长度中间空格隔开成对出现。 |
| stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 | | stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel：使用斜角连接路径段；<br/>miter：使用尖角连接路径段；<br/>round：使用圆角连接路径段。 | | stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel：使用斜角连接路径段；<br/>miter：使用尖角连接路径段；<br/>round：使用圆角连接路径段。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt：不在路径两端扩展；<br/>round：在路径的末端延伸半个圆，直径等于线度。<br/>square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。 | | stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt：不在路径两端扩展；<br/>round：在路径的末端延伸半个圆，直径等于线宽；<br/>square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 |
| stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 | | stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画 | | stroke-opacity | number | 1 | 否 | 轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画 |
| stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 | | stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md
浏览文件 @ 151a10dd
# ellipse # ellipse
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
椭圆形状。 椭圆形状。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="400" height="400"> <svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md
浏览文件 @ 151a10dd
# line # line
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制线条。 绘制线条。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持所列的Svg组件通用属性和以下表格的属性。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -31,15 +31,18 @@ ...@@ -31,15 +31,18 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> <svg width="400" height="400">
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line> <line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line> <line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line> <line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
// round：在路径的末端延伸半个圆，直径等于线宽
<line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line> <line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
// butt：不在路径两端扩展
<line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line> <line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
// square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line> <line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg> </svg>
</div> </div>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md
浏览文件 @ 151a10dd
# path # path
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制路径。 绘制路径。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> <svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md
浏览文件 @ 151a10dd
# polygon # polygon
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制多边形。 绘制多边形。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" stroke="blue" width="400" height="400"> <svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md
浏览文件 @ 151a10dd
# polyline # polyline
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制折线。 绘制折线。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持所列的Svg组件通用属性和以下表格的属性。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" stroke="blue" width="400" height="400"> <svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md
浏览文件 @ 151a10dd
# rect # rect
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于绘制矩形、圆角矩形。 用于绘制矩形、圆角矩形。
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
## 子组件 ## 子组件
支持animate、animateMotion、animateTransform。 支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。 支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="400" height="400"> <svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
浏览文件 @ 151a10dd
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
## 子组件 ## 子组件
支持tspan、textpath、animate、animateTransform。 支持[tspan](js-components-svg-tspan.md)、[textpath](js-components-svg-textpath.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性 ## 属性
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 151a10dd
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
沿路径绘制文本。 沿路径绘制文本。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。 > - 按指定的路径绘制文本，可嵌套子标签tspan分段。
> >
> - 只支持被父元素标签text嵌套。 > - 只支持被父元素标签text嵌套。
## 权限列表 ## 权限列表
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
## 子组件 ## 子组件
tspan。 [tspan](js-components-svg-tspan.md)。
## 属性 ## 属性
...@@ -26,37 +26,26 @@ tspan。 ...@@ -26,37 +26,26 @@ tspan。
支持以下表格中的属性。 支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath | | path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 | | startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 | | fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 | | by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | | opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | | fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 | | stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 | | stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | | stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
## 示例 ## 示例
textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素&lt;path&gt;曲线仅做参照） textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素&lt;path&gt;曲线仅做参照）
``` ```html
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -70,11 +59,23 @@ textspan属性示例，textpath文本内容沿着属性path中的路径绘制文 ...@@ -70,11 +59,23 @@ textspan属性示例，textpath文本内容沿着属性path中的路径绘制文
</div> </div>
``` ```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png) ![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png)
textpath与tspan组合示例与效果图 textpath与tspan组合示例与效果图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -92,7 +93,7 @@ textpath与tspan组合示例与效果图 ...@@ -92,7 +93,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png) ![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -112,7 +113,7 @@ textpath与tspan组合示例与效果图 ...@@ -112,7 +113,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png) ![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
...@@ -135,7 +136,7 @@ textpath与tspan组合示例与效果图 ...@@ -135,7 +136,7 @@ textpath与tspan组合示例与效果图
startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: row; flex-direction: row;
...@@ -146,7 +147,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘 ...@@ -146,7 +147,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
} }
``` ```
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -167,7 +168,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘 ...@@ -167,7 +168,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
textpath与tspan组合属性动画与效果图 textpath与tspan组合属性动画与效果图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -204,7 +205,7 @@ textpath与tspan组合属性动画与效果图 ...@@ -204,7 +205,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图 textpath与tspan组合属性动画与效果图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
...@@ -242,7 +243,7 @@ textpath与tspan组合属性动画与效果图 ...@@ -242,7 +243,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图 textpath与tspan组合属性动画与效果图
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md
浏览文件 @ 151a10dd
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
添加文本样式。 添加文本样式。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。 > - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
> >
> - 文本分段，只支持被父元素标签svg嵌套。 > - 文本分段，只支持被父元素标签svg嵌套。
## 权限列表 ## 权限列表
...@@ -17,43 +17,31 @@ ...@@ -17,43 +17,31 @@
## 子组件 ## 子组件
支持tspan。 支持[tspan](js-components-svg-tspan.md)。
支持以下表格中的属性。 支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 | | x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 | | y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 | | dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 | | dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 | | rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 | | fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | | opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 | | fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 | | stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 | | stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 | | stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
## 示例 ## 示例
``` ```html
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
```
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg > <svg >
...@@ -73,22 +61,22 @@ ...@@ -73,22 +61,22 @@
</div> </div>
``` ```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png) ```css
属性动画示例
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
height: 3000px; height: 1000px;
width: 1080px; width: 1080px;
} }
``` ```
``` ![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -111,9 +99,20 @@ ...@@ -111,9 +99,20 @@
</div> </div>
``` ```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
width: 1080px;
}
```
![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif) ![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -130,7 +129,7 @@ ...@@ -130,7 +129,7 @@
![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif) ![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -146,7 +145,7 @@ ...@@ -146,7 +145,7 @@
![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif) ![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ 151a10dd
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。 基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 > - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
## 子组件 ## 子组件
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。 支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animateTransform.md)。
## 属性 ## 属性
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg width="400" height="400"> <svg width="400" height="400">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或