HarmonyOS应用开发-Svg组件path体验

鸿蒙时代
发布于 2022-1-27 10:21
2924浏览
0收藏

HarmonyOS应用开发-Svg组件path体验-鸿蒙开发者社区

一、说明
绘制路径。
说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

二、子组件
支持animate、animateMotion、animateTransform。
三、属性
支持Svg组件通用属性和以下属性。
HarmonyOS应用开发-Svg组件path体验-鸿蒙开发者社区

四、案例

<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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

效果:
HarmonyOS应用开发-Svg组件path体验-鸿蒙开发者社区

完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/path

分类
标签
HarmonyOS应用开发-Svg组件path体验.docx 28.65K 9次下载
收藏
回复
举报


回复
    相关推荐