SVG(可缩放矢量图形)是一种用于描述二维矢量图形的XML标记语言。以下是一份简要的SVG参考手册,包含一些常用的SVG元素和属性:

常用SVG元素:

1. <svg>:定义SVG文档的根元素。
   - 属性:width、height 定义SVG画布的宽度和高度。

2. <rect>:创建矩形。
   - 属性:x、y 定义左上角坐标,width、height 定义宽度和高度。

3. <circle>:创建圆形。
   - 属性:cx、cy 定义圆心坐标,r 定义半径。

4. <line>:创建直线。
   - 属性:x1、y1 定义起点坐标,x2、y2 定义终点坐标。

5. <path>:创建路径。
   - 属性:d 定义路径数据。

6. <text>:创建文本。
   - 属性:x、y 定义文本起始点坐标。

7. <g>:创建组。
   - 用于组合多个图形元素。

8. <lineargradient>:定义线性渐变。
   - 用于创建从一个颜色过渡到另一个颜色的效果。

9. <radialgradient>:定义径向渐变。
   - 用于创建从一个颜色过渡到另一个颜色的径向效果。

常用SVG属性:

1. fill:定义图形的填充颜色。
2. stroke:定义图形的边框颜色。
3. stroke-width:定义图形的边框宽度。
4. opacity:定义图形的不透明度。
5. transform:定义图形的变换(平移、旋转、缩放等)。
6. id:为元素定义唯一标识符。
7. class:为元素定义一个或多个样式类。
8. viewbox:定义用户坐标系和图形坐标系之间的映射关系。

示例:
<svg width="200" height="200">
  <rect x="10" y="10" width="50" height="50" fill="#3498db" />
  <circle cx="120" cy="40" r="30" fill="#e74c3c" />
  <line x1="30" y1="80" x2="170" y2="80" stroke="#2ecc71" stroke-width="3" />
  <text x="60" y="150" fill="#f39c12">SVG Text</text>
</svg>

这个简要的SVG参考手册提供了一些基本的SVG元素和属性,但SVG还有很多其他功能和属性可供使用。如果你需要更详细的信息,建议查阅官方文档或其他SVG教程。


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