常用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