HarmonyOS应用开发-Svg组件体验 - HarmonyOS技术社区 - 电子技术论坛

2022-01-12 14:13:08

效果如图：
一．说明

·该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
·svg父组件或者svg组件需要定义宽高值，否则不进行绘制。

1.svg基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
属性：支持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的宽高不一致，会以中心对齐进行缩放。

2.rect用于绘制矩形、圆角矩形。
属性：支持Svg组件通用属性和以下属性。

二．体验案例示例代码Index.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 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>
</div>

复制代码

Index.css示例代码：

复制代码

完整代码地址：

附件：

(38.94 KB, 下载次数: 0)

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]HarmonyOS应用开发-Svg组件体验