SVG 参考手册

SVG 参考手册

1. 简介

SVG（可缩放矢量图形）是一种基于XML的图形格式，用于描述二维图形和图形应用程序。SVG图像在放大或缩小时不会失真，因为它们是由直线、曲线、点和多边形等数学对象定义的，而不是由像素组成的。这使得SVG非常适合网页设计、打印图形和动画。

2. 基础结构

一个基本的SVG文件结构如下所示：

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

• width 和 height 属性定义了SVG图像的宽度和高度。
• xmlns 属性定义了SVG命名空间。

3. 常用图形元素

3.1 矩形（<rect>）

<rect x="10" y="10" width="30" height="20" style="fill:blue; stroke:black;"/>

• x 和 y 属性定义了矩形左上角的坐标。
• width 和 height 属性定义了矩形的宽度和高度。
• style 属性定义了矩形的填充颜色和边框颜色。

3.2 圆形（<circle>）

<circle cx="50" cy="50" r="40" style="fill:yellow; stroke:green;"/>

• cx 和 cy 属性定义了圆心的坐标。
• r 属性定义了圆的半径。
• style 属性定义了圆的填充颜色和边框颜色。

3.3 椭圆（<ellipse>）

<ellipse cx="75" cy="75" rx="20" ry="5" style="fill:red;"/>

• cx 和 cy 属性定义了椭圆中心的坐标。
• rx 和 ry 属性定义了椭圆的水平和垂直半径。
• style 属性定义了椭圆的填充颜色。

3.4 直线（<line>）

<line x1="10" y1="10" x2="50" y2="50" style="stroke:black;"/>

• x1 和 y1 属性定义了直线的起点坐标。
• x2 和 y2 属性定义了直线的终点坐标。
• style 属性定义了直线的颜色。

3.5 多边形（<polygon>）

<polygon points="20,20 40,20 40,40 20,40" style="fill:purple;"/>

• points 属性定义了多边形的顶点坐标。
• style 属性定义了多边形的填充颜色。

3.6 路径（<path>）

<path d="M10 10 H 90 V 90 H 10 L 10 10" style="fill:none; stroke:black;"/>

• d 属性定义了路径的形状和方向。
• style 属性定义了路径的颜色。

4. 文本（<text>）

<text x="10" y="50">Hello, SVG!</text>

• x 和 y 属性定义了文本的起始坐标。
• 文本内容放在 <text> 和 </text> 标签之间。

5. 样式和属性

SVG支持CSS样式和属性，可以用来控制图形的外观。例如：

<rect x="10" y="10" width="30" height="20" style="fill:blue; stroke:black; stroke-width:2;"/>

• fill 属性定义了图形的填充颜色。
• stroke 属性定义了图形的边框颜色。
• stroke-width 属性定义了边框的宽度。

6. 变换

SVG支持多种变换，如平移、旋转和缩放。例如：

<rect x="10" y="10" width="30" height="20" transform="translate(50,50) rotate(45) scale(2)"/>

• transform 属性定义了图形的变换。

7. 动画

SVG支持动画效果，可以通过SVG动画元素或CSS动画实现。例如：

<rect x="10" y="10" width="30" height="20" style="animation: move 5s infinite alternate;">

@keyframes move {
  0% { transform