SVG基本形状：矩形、圆形、椭圆

发表于 2025-12-13 更新于 2025-12-26 分类于入门， SVG ，专题， SVG 阅读次数：

本篇覆盖 SVG 中三类最基础的图形元素：<rect>、<circle>、<ellipse>，配合示例快速掌握常用属性与效果。

一、矩形

用途：绘制矩形、方块、背景等
常用属性：
- x：矩形左上角的 x 坐标
- y：矩形左上角的 y 坐标
- width：宽度
- height：高度
- rx/ry：圆角半径
示例：

<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个带圆角和描边的绿色矩形 -->
  <rect x="10" y="10" width="100" height="60" fill="#81C784" stroke="#388E3C" stroke-width="4" rx="10" />
  
</svg>

成品展示：

二、圆形

用途：绘制圆、点、图标等
常用属性：
- cx：圆心 x 坐标
- cy：圆心 y 坐标
- r：半径
示例：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个蓝色圆形，带有描边 -->
  <circle cx="50" cy="50" r="40" fill="#4FC3F7" stroke="#0288D1" stroke-width="4" />
  
</svg>

成品展示：

三、椭圆

用途：绘制椭圆、装饰元素等
常用属性：
- cx：椭圆中心 x 坐标
- cy：椭圆中心 y 坐标
- rx：x 轴半径
- ry：y 轴半径
示例：

<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个黄色椭圆，带有描边 -->
  <ellipse cx="60" cy="40" rx="50" ry="30" fill="#FFD54F" stroke="#FFA000" stroke-width="4" />
  
</svg>

成品展示：

小结

矩形、圆形与椭圆是最常用的基础形状，配合填充、描边与圆角即可快速搭建常见图形。

0%