HarmonyOS应用开发-Svg组件体验 原创

发布于 2022-1-12 12:18
浏览
1收藏

效果如图:
::: hljs-center

HarmonyOS应用开发-Svg组件体验-开源基础软件社区

:::

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

1.svg
基础容器,主要作为svg的根节点使用,也可以在svg中嵌套使用。
属性:
支持Svg组件通用属性和以下属性,设置的通用属性会传递给子组件。
HarmonyOS应用开发-Svg组件体验-开源基础软件社区
2.rect
用于绘制矩形、圆角矩形。
属性:
支持Svg组件通用属性和以下属性。
HarmonyOS应用开发-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示例代码:

.container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
HarmonyOS应用开发-Svg组件体验.docx 38.94K 16次下载
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐