从零开始：SVG图形绘制入门教程，快速掌握矢量图形设计技巧

SVG（可缩放矢量图形）是一种基于可扩展标记语言的图形图像格式。它允许你创建和编辑矢量图形，这些图形可以无限放大而不失真。SVG在网页设计中尤其受欢迎，因为它可以与HTML和CSS一起使用，创建交互式和响应式的图形。

一、SVG基础

1. SVG文档结构

一个SVG文档的基本结构如下：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 图形内容 --> </svg>

width 和 height：定义SVG画布的大小。
xmlns：定义SVG命名空间。

2. SVG元素

SVG中有许多元素可以用来绘制图形，以下是一些常用的元素：

<line>：直线。
<circle>：圆形。
<ellipse>：椭圆。
<rect>：矩形。
<polygon>：多边形。
<path>：路径。

二、绘制基本图形

1. 绘制直线

使用<line>元素可以绘制直线。以下是一个例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="100" y2="100" style="stroke:rgb(0,0,0);stroke-width:2" /> </svg>

这里，x1、y1定义了起点坐标，x2、y2定义了终点坐标。

2. 绘制圆形

使用<circle>元素可以绘制圆形。以下是一个例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

这里，cx和cy定义了圆心的坐标，r定义了半径。

3. 绘制矩形

使用<rect>元素可以绘制矩形。以下是一个例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> </svg>

这里，width和height定义了矩形的大小。

4. 绘制多边形

使用<polygon>元素可以绘制多边形。以下是一个例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <polygon points="20,20 140,20 80,160" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>

这里，points属性定义了多边形的顶点坐标。

5. 绘制路径

使用<path>元素可以绘制复杂的路径。以下是一个例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 h 80 v 80 h -80 Z" fill="red" /> </svg>

这里，d属性定义了路径的命令。

三、SVG高级技巧

1. 动画

SVG支持动画，可以使用<animate>元素来创建动画效果。以下是一个简单的例子：

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

这里，attributeName定义了要动画化的属性，from和to定义了动画的起始和结束值，dur定义了动画的持续时间。

2. 交互

SVG支持交互，可以使用<a>元素来创建链接。以下是一个例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="red"> <a href="http://www.example.com" xlink:href="http://www.example.com"> Click me! </a> </circle> </svg>

这里，xlink:href定义了链接的目标地址。