从零开始学SVG：绘图大师养成记，一图胜千言！

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG图像在放大或缩小后不会失真，可以无限放大而不影响图像质量，这使得它非常适合用于网页设计和打印输出。本篇文章将从零开始，带你一步步成为SVG绘图大师。

SVG基础概念

1. SVG元素

SVG图形由各种元素组成，如<circle>、<rect>、<line>、<polyline>、<polygon>、<ellipse>等。每个元素都有相应的属性，用于定义其形状、颜色、位置等。

2. SVG坐标系统

SVG使用一个二维笛卡尔坐标系统，其中原点位于左上角。x轴表示水平方向，y轴表示垂直方向。

3. 属性和样式

SVG元素可以具有属性，用于定义其外观和行为。常见的属性包括width、height、fill、stroke、stroke-width等。同时，还可以使用CSS样式来进一步美化SVG图形。

SVG绘图实例

下面通过几个简单的例子，展示SVG绘图的基本方法。

1. 绘制圆形

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

这个例子中，我们使用<circle>元素绘制了一个红色的圆形，圆心位于(50, 50)，半径为40。

2. 绘制矩形

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue" />
</svg>

这个例子中，我们使用<rect>元素绘制了一个蓝色的矩形，左上角坐标为(10, 10)，宽度和高度均为80。

3. 绘制线条

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="3" />
</svg>

这个例子中，我们使用<line>元素绘制了一条黑色的直线，起点坐标为(10, 10)，终点坐标为(90, 90)。

SVG高级技巧

1. 组合元素

可以使用<g>元素将多个SVG元素组合在一起，以便统一进行操作。

<svg width="100" height="100">
  <g>
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="3" fill="blue" />
  </g>
</svg>

2. 动画

SVG支持多种动画效果，如渐变、移动、放大等。下面是一个简单的动画示例：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <animate attributeName="r" from="40" to="60" dur="2s" fill="freeze" />
</svg>

这个例子中，圆形的半径从40逐渐增加到60，动画持续时间为2秒。

总结

SVG是一种功能强大的图形图像格式，具有许多优点。通过学习SVG，你可以轻松地绘制出精美的图形，并将其应用于网页设计和打印输出。希望这篇文章能帮助你从零开始，成为SVG绘图大师。