【SVGⅢ 】画出所有你想要的图形（代码示例）

SVG 使用的直角坐标系以画布左上角为原点（0, 0），y 轴向下为正方向。

代码示例- 矩形 (rectangle)

<svg width="100%" height="80">
    <rect x="10" y="10" width="100" height="60" rx="10" ry="10" fill="#B69E3D">
    </rect>
</svg>

代码示例- 圆形(circle)

<svg width="100%" height="120">
    <circle cx="60" cy="60" r="50" fill="#B69E3D">
    </circle>
</svg>

代码示例-椭圆形 (eclipse)

<svg width="100%" height="110">
    <ellipse cx="60" cy="60" rx="60" ry="40" fill="#B69E3D">
    </ellipse>
</svg>

代码示例-直线(line)

<svg width="100%" height="40">
    <line x1="10" y1="10" x2="80" y2="30" stroke="#B69E3D" stroke-width="5">
    </line>
</svg>

代码示例-折线(polyline)

<svg width="100%" height="90">
    <polyline points="10,60 30,20 80,20 20,90" stroke="#B69E3D" stroke-width="5" fill="none">
    </polyline>
</svg>

代码示例-多边形(polygon)

<svg width="100%" height="90">
    <polygon points="10,60 30,20 80,20 20,90" stroke="#B69E3D" stroke-width="5" fill="none">
    </polygon>
</svg>

代码示例-路径(path)

<svg width="100%" height="60">
    <path d="M 10 10 H 80 V 30 H 10 Z" fill="#B69E3D""/>
</svg>