第 1 天：如何使用 SVG 绘制基本形状SVG（可缩放矢量图形）的语法与 HTML 相似。它们都基于 XML。从 HT

SVG（可缩放矢量图形）的语法与 HTML 相似。它们都基于 XML。从 HTML5 开始，我们可以简单地将 SVG 图像的代码内联到 HTML 文件中，如下所示。

<html>
  <h1>Hi there</h1>
  <svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="25" fill="red" />
  </svg>
</html>

我们可以使用JavaScript访问图像的某些部分以使其具有交互性。在本教程系列中，我们将逐步学习SVG的语法。

在开始绘制之前，我们必须先讨论一下 svg 元素本身。SVG元素包含图像元素并定义图像的框架。它设置图像的内部大小和外部大小。

width 和 height 属性定义了图像在浏览器中占用的空间大小。还有一个 viewBox 属性，用于定义图像元素的坐标系统。viewBox中的前两个值定义了图像的左上角坐标，后两个值定义了图像元素的坐标大小。

在接下来的三个示例中，我们有三个具有完全相同内容的svg。具有相同中心坐标和相同半径的 circle 元素。不过它们看起来很不一样。如果viewBox定义的宽度和高度属性不匹配，则图像会向上或向下缩放。

我们还可以设置图像左上角的坐标。在下面的示例中，我们将坐标系统的原点移动到图像的中心。我们将左上角设置为 -100,-100。

注意，现在圆的中心位置是 0,0 。

svg通常也有一个 xmlns 属性。但是，如果图像在HTML中内联，则可以省略这一点。

让我们从一个简单的圣诞装饰品开始。这里我们只使用简单的形状，一个矩形和两个圆。注意，坐标系的原点在图像的中心。

首先，我们通过绘制 circle 来定义圣诞装饰品的主体部分。要画一个圆，我们设置它们的中心位置( cx 和 cy )和半径 r 属性。

与CSS中的 background-color 属性类似，我们使用 fill 属性来设置形状的颜色。

然后我们用 rect 元素在圣诞装饰的顶部画一个矩形作为一个小帽子。在本例中，我们必须设置矩形的左上角位置及其大小。我们使用 fill 属性的方式与我们使用圆圈的方式相同。

最后，我们在上面再加一个圆作为衣架。注意，我们使用了相同的 circle 元素，但是具有不同的属性。我们将填充属性设置为“none”，并为形状设置了 stroke 和 stroke-width 属性的边框。

左侧图像的最终代码如下:

太棒了!我们绘制了第一张SVG图像。