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>

HarmonyOS API:svg组件-鸿蒙开发者社区

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>

HarmonyOS API:svg组件-鸿蒙开发者社区

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>

HarmonyOS API:svg组件-鸿蒙开发者社区

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>

HarmonyOS API:svg组件-鸿蒙开发者社区


文章转载自:​​https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-svg-ellipse-0000001427744908-V3?catalogVersion=V3​


已于2023-3-30 19:51:04修改
收藏
回复
举报
回复
    相关推荐