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

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

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

1.
2.
3.
4.
5.
6.