SVG（可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言，通常用于在Web页面上显示图形。以下是一个简单的SVG教程，介绍SVG的基本概念和用法：

1. SVG基础

1.1 SVG文档结构

一个简单的SVG文档的基本结构如下：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 在这里添加图形元素 -->
</svg>

  •  width 和 height 定义了SVG画布的宽度和高度。

  •  xmlns 属性用于指定XML命名空间。


1.2 SVG图形元素

常见的SVG图形元素包括：
  •  <rect>：矩形

  •  <circle>：圆形

  •  <ellipse>：椭圆

  •  <line>：直线

  •  <polyline>：折线

  •  <polygon>：多边形

  •  <path>：路径


2. SVG图形绘制

2.1 矩形（Rectangle）
<rect width="50" height="50" fill="blue" />

2.2 圆形（Circle）
<circle cx="50" cy="50" r="30" fill="red" />

2.3 直线（Line）
<line x1="10" y1="10" x2="90" y2="90" stroke="green" stroke-width="2" />

2.4 路径（Path）
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black" />

3. SVG样式和属性

3.1 填充和边框
<circle cx="50" cy="50" r="30" fill="yellow" stroke="black" stroke-width="2" />

3.2 CSS样式
<rect width="50" height="50" style="fill:orange;stroke:black;stroke-width:2" />

4. SVG动画

SVG支持通过CSS和SMIL（Synchronized Multimedia Integration Language）实现简单的动画效果。

4.1 CSS动画
<circle cx="50" cy="50" r="30" style="fill:blue;stroke:black;stroke-width:2">
  <animate attributeName="r" from="30" to="10" dur="1s" begin="0s" repeatCount="indefinite" />
</circle>

4.2 SMIL动画
<circle cx="50" cy="50" r="30" style="fill:blue;stroke:black;stroke-width:2">
  <animate attributeName="r" from="30" to="10" dur="1s" begin="0s" repeatCount="indefinite" />
</circle>

5. 在HTML中嵌入SVG

你可以在HTML文档中使用 <svg> 标签来嵌入SVG图形。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Tutorial</title>
</head>
<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- 在这里添加图形元素 -->
  </svg>
</body>
</html>

这只是一个简单的SVG入门教程，SVG有更多的功能和复杂的使用方法，包括滤镜、渐变、嵌套等。如果你想深入学习SVG，可以查阅W3C的SVG规范文档或其他在线资源。


转载请注明出处：http://www.pingtaimeng.com/article/detail/12374/SVG