蛟龙腾飞HarmonyOS应用开发-Svg组件path体验
一、说明
绘制路径。
| 说明：该组件从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 -150 1 0 100 110 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>效果：
完整代码地址：
2
1
5
浏览539 发布于2022-01-27 02:11未知归属地
全部评论
最多点赞
最新发布
最早发布
不保熟的瓜让我康康代码先
5楼回复于2022-02-09 14:57 未知归属地
悠芷厉害啊
4楼回复于2022-01-27 04:16 未知归属地
悠芷nice
3楼回复于2022-01-27 04:15 未知归属地
chaoxiaoshu
支持，感谢大佬分享
回头我也把我的笔记发出来
2楼回复于2022-01-27 03:47 未知归属地
182******05坐标定位有没有更简单方式？
1楼回复于2022-01-27 02:49 未知归属地
写回答
新增插入模板功能
一键使用模板，快速填写内容，轻松发帖～
知道了
- 为了保障您的信息安全，请勿上传您的敏感个人信息（如您的密码等信息）和您的敏感资产信息（如关键源代码、签名私钥、调试安装包、业务日志等信息），且您需自行承担由此产生的信息泄露等安全风险。
- 如您发布的内容为转载内容，请注明内容来源。
我要发帖子
目录 收起
一、说明
二、子组件
三、属性
了解社区公约，与您携手共创和谐专业的开发者社区。
苏公安网备 32011402010933号