SVG绘图入门：从零基础到绘制实用图表的完整教程

SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML）的图形图像格式。SVG图像在放大或缩小时不会失真，因此非常适合用于网页设计、移动应用和打印材料。本教程将从零基础开始，带你一步步学习SVG绘图，并最终绘制出实用的图表。

第一节：SVG基础

1.1 SVG简介

SVG是一种矢量图形格式，与位图格式（如JPEG和PNG）不同。位图由像素组成，放大时可能会出现模糊或失真。而SVG由数学定义的路径、形状和文本组成，因此可以无限放大而不失真。

1.2 SVG元素

SVG文档由多个元素组成，包括<svg>、<circle>、<rect>、<line>、<polyline>、<polygon>、<path>、<text>等。这些元素可以组合使用，绘制出各种图形。

1.3 SVG属性

SVG元素具有多种属性，用于控制其外观和行为。例如，<circle>元素的cx和cy属性分别表示圆心的x和y坐标，r属性表示圆的半径。

第二节：SVG绘图基础

2.1 绘制基本形状

本节将介绍如何使用SVG元素绘制基本形状，如圆形、矩形、线条、多边形和路径。

2.1.1 圆形

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
</svg>

2.1.2 矩形

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="3" fill="blue" />
</svg>

2.1.3 线条

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="3" />
</svg>

2.1.4 多边形

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,50 150,50 100,150" stroke="black" stroke-width="3" fill="green" />
</svg>

2.1.5 路径

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 Z" stroke="black" stroke-width="3" fill="purple" />
</svg>

2.2 组合形状

将多个形状组合在一起，可以创建更复杂的图形。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" stroke="black" stroke-width="3" fill="red" />
  <circle cx="100" cy="100" r="30" stroke="black" stroke-width="3" fill="blue" />
</svg>

第三节：SVG文本

SVG支持文本元素，可以用于添加标题、标签和说明。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="20" font-family="Verdana" font-size="20" fill="black">Hello, SVG!</text>
</svg>

第四节：绘制实用图表

4.1 绘制柱状图

柱状图是一种常用的图表类型，用于比较不同类别之间的数据。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="150" fill="red" />
  <rect x="50" y="10" width="30" height="100" fill="blue" />
  <rect x="90" y="10" width="30" height="50" fill="green" />
</svg>

4.2 绘制折线图

折线图用于显示数据随时间或其他变量的变化趋势。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="10" stroke="black" stroke-width="2" />
  <line x1="10" y1="10" x2="10" y2="190" stroke="black" stroke-width="2" />
  <line x1="10" y1="50" x2="190" y2="50" stroke="red" stroke-width="2" />
  <line x1="10" y1="100" x2="190" y2="100" stroke="blue" stroke-width="2" />
  <line x1="10" y1="150" x2="190" y2="150" stroke="green" stroke-width="2" />
</svg>

第五节：SVG进阶

5.1 动画

SVG支持动画，可以用于创建动态效果。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
  <animate attributeName="r" from="50" to="100" dur="2s" fill="freeze" />
</svg>

5.2 交互

SVG支持交互，可以用于创建可点击的图形。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
  <circle cx="100" cy="100" r="5" stroke="black" stroke-width="2" fill="white" />
  <circle cx="100" cy="100" r="5" stroke="black" stroke-width="2" fill="white" />
  <script>
    var circle = document.querySelector("circle");
    circle.addEventListener("click", function() {
      alert("Hello, SVG!");
    });
  </script>
</svg>

总结

通过本教程，你已掌握了SVG绘图的基础知识和实用技巧。SVG是一种强大的图形格式，可以用于创建各种图形和图表。希望你在实际应用中能够灵活运用所学知识，创作出更多优秀的作品。