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

效果如图：
::: hljs-center

:::

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

1.svg
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
属性：
支持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示例代码：

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

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