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

2022-01-27 14:18:08

一、说明绘制路径。

说明：该组件从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

四、案例

<div class="container">
<svg width="400" height="200">
<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>
<svg width="400" height="400">
<path d="M 100 90 A 10 20 -30 1 0 91.5 95
A 10 20 -90 1 0 91.5 105
A 10 20 -***
A 10 20 150 1 0 108.5 105
A 10 20 90 1 0 108.5 95
A 10 20 30 1 0 100 90"
stroke="blue" stroke-width="3" fill="red">
</path>
</svg>
</div>

复制代码

效果：

(28.65 KB, 下载次数: 0)

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

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