突破编程_前端_SVG（基础元素介绍）

1 rect 矩形

在 SVG 中，<rect> 元素用于创建圆形。

（1）基本语法

<rect
  x="x坐标"
  y="y坐标"
  width="宽度"
  height="高度"
  rx="可选：圆角x半径"
  ry="可选：圆角y半径"
  fill="可选：填充颜色"
  stroke="可选：描边颜色"
  stroke-width="可选：描边宽度"
  ... />

1. x, y ：这两个属性定义了矩形左上角的坐标。默认值是 0。
2. width, height ：这两个属性定义了矩形的宽度和高度。
3. rx, ry ：这两个属性可选，用于定义矩形的圆角半径。如果 rx 和 ry 相同，则矩形四个角都是相同的圆角；如果不同，则左上角和右下角的圆角半径为 rx，右上角和左下角的圆角半径为 ry。
4. fill ：定义矩形的填充颜色。如果不设置此属性，矩形将默认透明。
5. stroke ：定义矩形的描边颜色。如果不设置此属性，矩形将没有描边。
6. stroke-width ：定义矩形的描边宽度。默认值是 1。

（2）示例

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个 200x200 的 SVG 画布，并在其中绘制了一个矩形。矩形的左上角坐标是 (10, 10)，宽度是 100，高度是 50。矩形被填充为蓝色，描边为黑色，描边宽度为 2。

2 circle 圆形

在 SVG 中，<circle> 元素用于创建圆形。