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>