SVG绘图入门：轻松掌握W3C标准，开启图形设计新篇章

SVG（Scalable Vector Graphics）是一种基于可扩展标记语言（XML）的图形绘制标准。它允许用户在网页上创建矢量图形，这些图形可以无限放大而不失真。SVG已成为网页图形设计的标准之一，广泛应用于网页设计、移动应用开发等领域。本文将带您入门SVG绘图，帮助您轻松掌握W3C标准，开启图形设计新篇章。

一、SVG基础概念

1.1 SVG文档结构

SVG文档由根元素<svg>开始，包含以下基本元素：

<title>：图形标题
<desc>：图形描述
<defs>：定义元素，如颜色、形状等
<g>：分组元素，用于组织图形
<path>：路径元素，用于绘制线条和曲线
<rect>：矩形元素
<circle>：圆形元素
<ellipse>：椭圆元素
<line>：直线元素
<polyline>：折线元素
<polygon>：多边形元素
<text>：文本元素

1.2 SVG属性

SVG元素具有丰富的属性，用于控制图形的样式、大小、位置等。以下是一些常用属性：

width和height：图形的宽度和高度
viewBox：定义图形的显示区域
fill：填充颜色
stroke：边框颜色
stroke-width：边框宽度
stroke-linecap：边框线帽样式
stroke-linejoin：边框线连接样式
transform：图形变换，如缩放、旋转等

二、SVG绘图实例

以下是一个简单的SVG绘图实例，绘制一个矩形和圆形：

<svg width="200" height="200" viewBox="0 0 200 200"> <!-- 矩形 --> <rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="2" /> <!-- 圆形 --> <circle cx="150" cy="150" r="50" fill="blue" stroke="black" stroke-width="2" /> </svg>

在上面的示例中，我们创建了一个宽200像素、高200像素的SVG文档，并设置了viewBox属性，使其显示区域为0到200像素的宽度和高度。接着，我们绘制了一个红色填充、黑色边框的矩形和一个蓝色填充、黑色边框的圆形。

三、SVG高级技巧

3.1 动画

SVG支持多种动画效果，如渐变、阴影、路径动画等。以下是一个简单的路径动画实例：

<svg width="200" height="200" viewBox="0 0 200 200"> <!-- 路径 --> <path d="M50,50 Q100,100 150,50" fill="none" stroke="black" stroke-width="2"> <!-- 动画 --> <animate attributeName="d" from="M50,50 Q100,100 150,50" to="M50,50 Q100,100 150,150" dur="2s" fill="freeze" /> </path> </svg>

在上面的示例中，我们创建了一个路径元素，并使用<animate>元素添加了一个动画效果，使路径在2秒内从左下角到右上角移动。

3.2 SVG滤镜

SVG滤镜允许用户对图形进行各种效果处理，如模糊、亮度调整、颜色变换等。以下是一个使用SVG滤镜的实例：

<svg width="200" height="200" viewBox="0 0 200 200"> <!-- 滤镜 --> <filter id="blur" x="0" y="0" width="200%" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> <!-- 图形 --> <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="2" filter="url(#blur)" /> </svg>

在上面的示例中，我们创建了一个名为blur的滤镜，并使用<feGaussianBlur>元素添加了一个高斯模糊效果。然后，我们将滤镜应用于圆形元素，使其具有模糊效果。