回复
HarmonyOS API：svg组件
joytrian
发布于 2023-3-29 21:31
浏览
0收藏
版本：v3.1 Beta
path
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制路径。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性，设置的通用属性会传递给子组件。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
d | string | - | 否 | 设置路径的形状。包含一组字符指令，大写字母为绝对路径，小写字符为相对路径。 字母指令表示的意义如下： - M/m = moveto - L/l = lineto - H/h = horizontal lineto - V/v = vertical lineto - C/c = curveto - S/s = smooth curveto - Q/q = quadratic Belzier curve - T/t = smooth quadratic Belzier curveto - A/a = elliptical Arc - Z/z = closepath |
示例
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red">
</path>
</svg>
</div>
line
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制线条。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
x1 | <length>|<percentage> | - | 否 | 设置线条起点的x轴坐标。支持属性动画。 |
y1 | <length>|<percentage> | - | 否 | 设置线条起点的y轴坐标。支持属性动画。 |
x2 | <length>|<percentage> | - | 否 | 设置线条终点的x轴坐标。支持属性动画。 |
y2 | <length>|<percentage> | - | 否 | 设置线条终点的y轴坐标。支持属性动画。 |
示例
<!-- xxx.hml -->
<div class="container">
<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="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>
// round：在路径的末端延伸半个圆，直径等于线宽
<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>
// square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg>
</div>
polyline
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制折线。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
points | string | - | 否 | 设置折线的多个坐标点 格式为[x1,y1 x2,y2 x3,y3]。 支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效 |
示例
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
<polyline points="10,110 60,35 60,85 110,10" fill="red"></polyline>
<polyline points="10,200 60,125 60,175 110,100" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
polygon
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制多边形。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
points | string | - | 否 | 设置多边形的多个坐标点 格式为[x1,y1 x2,y2 x3,y3]。 支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效 |
示例
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
<polygon points="10,110 60,35 60,85 110,10" fill="red"></polygon>
<polygon points="10,200 60,125 60,175 110,100" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
animateMotion
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
路径动效。
权限列表
无
子组件
不支持。
属性
支持animate属性（values不生效）和以下表格中的属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
keyPoints | string | - | 是 | 一组关键帧的点位置，每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。 |
path | string | - | 是 | 定义运动的路径，使用与path组件d属性相同的语法。 |
rotate | [auto | auto-reverse | <number>] | auto | 否 | 设置动画对象的旋转方向。 |
示例
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
<path fill="none" stroke="blue" stroke-width="3" d="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></animateMotion>
</path>
</svg>
</div>
赞
收藏
回复
相关推荐
