通过线段、矩形、圆和路径绘制SVG基本形状！

2023-09-19 05:28:21

SVG基本形状

SVG的基本形状是线段、矩形、圆和路径。这些形状可以组合起来创建更复杂的图形，并用于创建各种各样的设计。

线段

线段是用x1、y1、x2和y2四个属性定义的，分别表示线段起点的x坐标、y坐标，以及线段终点的x坐标、y坐标。

<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />

矩形

矩形是用x、y、width和height四个属性定义的，分别表示矩形的左上角x坐标、y坐标，以及矩形的宽度和高度。

<rect x="0" y="0" width="100" height="100" stroke="black" stroke-width="2" fill="red" />

圆

圆是用cx、cy和r三个属性定义的，分别表示圆的圆心x坐标、y坐标，以及圆的半径。

<circle cx="50" cy="50" r="50" stroke="black" stroke-width="2" fill="blue" />

路径

路径是用d属性定义的，该属性包含一个由命令和坐标组成的字符串。命令用于指定路径的形状，坐标用于指定路径的点。

<path d="M 0 0 L 100 100 L 200 0 Z" stroke="black" stroke-width="2" fill="green" />

使用基本形状创建图形

基本形状可以组合起来创建更复杂的图形。例如，我们可以使用线段、矩形和圆来创建一个房子。

<svg width="200" height="200">
  <line x1="0" y1="100" x2="200" y2="100" stroke="black" stroke-width="2" />
  <rect x="50" y="100" width="100" height="100" stroke="black" stroke-width="2" fill="red" />
  <circle cx="75" cy="75" r="25" stroke="black" stroke-width="2" fill="blue" />
  <circle cx="125" cy="75" r="25" stroke="black" stroke-width="2" fill="blue" />
</svg>