回复
HarmonyOS API：svg组件
joytrian
发布于 2023-3-30 19:51
浏览
0收藏
版本：v3.1 Beta
通用属性
更新时间: 2023-02-17 09:19
说明
从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
名称 | 类型 | 默认值 | 必填 | 描述 |
fill | <color> | black | 否 | 使用简写属性设置元素的填充色。支持属性动画。 |
fill-opacity | number | 1 | 否 | 填充色的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
fill-rule | nonzero | evenodd | nonzero | 否 | nonzero:非零规则; evenodd:奇偶规则 |
opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
stroke | <color> | - | 否 | 设置形状轮廓的颜色。支持属性动画。 |
stroke-dasharray | <string> | - | 否 | 指定短划线和缺口的长度。格式为[length length length length]，短划线和缺口的长度中间空格隔开成对出现。 |
stroke-dashoffset | <length> | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
stroke-linejoin | [bevel | miter | round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。 bevel：使用斜角连接路径段； miter：使用尖角连接路径段； round：使用圆角连接路径段。 |
stroke-linecap | [butt | round | square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。 butt：不在路径两端扩展； round：在路径的末端延伸半个圆，直径等于线宽； square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 |
stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
stroke-opacity | number | 1 | 否 | 轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画 |
stroke-width | <length> | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
transform | <string> | - | 否 | 设置组件以及子组件的坐标变换参数。 支持以下格式： translate(<x> [<y>]) ：沿x[y]轴方向平移 scale(<x> [<y>]) ：沿x[y]轴缩放 rotate(<a> [<x> <y>]) ：以(x,y)点进行旋转a度角 skewX(<a>) ：沿x轴倾斜a度角的变换 skewY(<a>) ：沿y轴倾斜a度角的变换 |
svg
更新时间: 2023-02-17 09:19
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
说明
- 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
- svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
权限列表
无
子组件
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。
属性
支持Svg组件通用属性和以下属性，设置的通用属性会传递给子组件。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
width | <length>|<percentage> | - | 否 | 设置组件的宽度。 |
height | <length>|<percentage> | - | 否 | 设置组件的高度。 |
x | <length>|<percentage> | - | 否 | 设置当前svg的x轴坐标，根svg节点无效。 |
y | <length>|<percentage> | 否 | 设置当前svg的y轴坐标，根svg节点无效。 | |
viewBox | string | - | 否 | 设置当前svg的视口。支持的格式为<number number number number>，4个参数分别表示min-x, min-y, width and height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。 |
示例
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
</svg>
<rect x="10" y="10" width="80" height="80" fill="red" ></rect>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="80" height="80" fill="red"></rect>
</svg>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 400 400">
<rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg>
</svg>
</div>
rect
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于绘制矩形、圆角矩形。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
width | <length>|<percentage> | 0 | 否 | 设置矩形的宽度。支持属性动画 |
height | <length>|<percentage> | 0 | 否 | 设置矩形的高度。支持属性动画 |
x | <length>|<percentage> | 0 | 否 | 设置矩形左上角x轴坐标。支持属性动画 |
y | <length>|<percentage> | 0 | 否 | 设置矩形左上角y轴坐标。支持属性动画 |
rx | <length>|<percentage> | 0 | 否 | 设置矩形圆角x方向半径。支持属性动画 |
ry | <length>|<percentage> | 0 | 否 | 设置矩形圆角y方向半径。支持属性动画 |
示例
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
<rect width="100" height="100" x="10" y="20" stroke-width="4" stroke="blue" id="rectId"></rect>
<rect width="100" height="100" x="150" y="20" stroke-width="4" stroke="blue" rx="10" ry="10"></rect>
<rect width="100" height="100" x="10" y="130" stroke-width="10" fill="red" stroke="blue" rx="10" ry="10"></rect>
<rect width="100" height="100" x="150" y="130" stroke-width="10" stroke="red" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
<rect width="100" height="100" x="20" y="270" stroke-width="4" stroke="blue" transform="rotate(-10)"></rect>
</svg>
</div>
circle
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
圆形形状。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
cx | <length>|<percentage> | 0 | 否 | 设置圆心的x轴坐标。支持属性动画。 |
cy | <length>|<percentage> | 0 | 否 | 设置圆心的y轴坐标。支持属性动画。 |
r | <length>|<percentage> | 0 | 否 | 设置圆的半径。支持属性动画。 |
示例
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
<circle cx="60" cy="200" r="50" stroke-width="4" fill="red" stroke="blue"></circle>
<circle cx="180" cy="200" r="50" stroke-width="10" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></circle>
</svg>
</div>
ellipse
更新时间: 2023-02-17 09:19
说明
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
椭圆形状。
权限列表
无
子组件
支持animate、animateMotion、animateTransform。
属性
支持Svg组件通用属性和以下属性。
名称 | 类型 | 默认值 | 必填 | 描述 |
id | string | - | 否 | 组件的唯一标识。 |
cx | <length>|<percentage> | 0 | 否 | 设置椭圆的x轴坐标。支持属性动画 |
cy | <length>|<percentage> | 0 | 否 | 设置椭圆的y轴坐标。支持属性动画 |
rx | <length>|<percentage> | 0 | 否 | 设置椭圆x轴的半径。支持属性动画 |
ry | <length>|<percentage> | 0 | 否 | 设置椭圆y轴的半径。支持属性动画 |
示例
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
<ellipse cx="60" cy="200" rx="50" ry="100" stroke-width="4" fill="red" stroke="blue"></ellipse>
<ellipse cx="220" cy="200" rx="100" ry="50" stroke-width="5" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
</svg>
</div>
已于2023-3-30 19:51:04修改
赞
收藏
回复
相关推荐
