SVG基本使用指南
SVG基本使用指南
SVG（可缩放矢量图形）是一种基于XML的矢量图形格式，广泛应用于Web开发中。它具有放大不失真的特点，非常适合用于图标、图表和复杂的图形设计。本文将带你快速掌握SVG的基本使用方法。
一、SVG基础概念
1. 位图与矢量图的区别
- 位图：放大会失真，图像边缘有锯齿，由像素点组成，前端的Canvas就是位图效果。
- 矢量图：放大不会失真，使用XML描述图形。
对于初学SVG的前端开发者来说，可以简单理解为“SVG是一套新标签”。因此，可以使用CSS来设置样式，也可以使用JS对SVG进行操作。
2. viewBox属性
viewBox属性定义了SVG中可以显示的区域，语法为viewBox="x y w h"，其中x和y为起始点，w和h为显示区域的宽高。
示例：
<svg width="300" height="300" viewBox="0 0 100 100">
<circle cx="100" cy="100" r="100" />
</svg>
为什么不是一个100大小的圆显示在画布上呢？viewBox定义了一个：从（0, 0）点开始，宽高为100 * 100的显示区域。而这个100 * 100的显示区域会放到300 * 300(svg宽高)的SVG中去显示，整体就放大了3倍。
3. version属性
version属性用于指明SVG的版本，目前只有1.0和1.1这两个版本。
4. 组合对象与模板对象
- 组合对象：使用
<g>标签创建，需要给它一个唯一的ID。 - 模板对象：使用
<symbol>标签创建，可以额外设置viewBox和宽高比。
二、基本图形标签
1. 矩形
矩形使用<rect>标签，默认填充色是黑色。基础属性包括x、y、width、height、rx和ry。
2. 圆形
圆形使用<circle>标签，基础属性有cx、cy和r。
3. 椭圆
椭圆使用<ellipse>标签，基础属性有cx、cy、rx和ry。
4. 直线
直线使用<line>标签，基础属性有x1、y1、x2、y2和stroke。
5. 折线
使用<polyline>标签绘制折线，基础属性有points、stroke和fill。
6. 多边形
多边形使用<polygon>标签，基础属性和<polyline>差不多，会自动闭合。
三、路径(path)
在SVG里，所有基本图形都是<path>的简写。所有描述轮廓的数据都放在d属性里，d属性又包括以下主要的关键字：
M：起始点坐标L：轮廓坐标Q：二次贝塞尔曲线C：三次贝塞尔曲线A：用于画弧形
四、样式设置
SVG的样式设置与CSS类似，常用的属性包括：
fill：填充颜色stroke：描边颜色stroke-width：描边宽度stroke-dasharray：虚线stroke-dashoffset：虚线偏移量
五、文本元素
使用<text>标签渲染文本，可以设置字号、字体粗细、装饰线等属性。通过<tspan>标签可以实现多行文本。
六、超链接与图片
- 超链接使用
<a>标签，需要在xlink:href属性里设置链接地址。 - 图片使用
<image>标签，通过xlink:href属性获取图片。
七、渐变
渐变分为线性渐变和径向渐变，使用<linearGradient>和<radialGradient>标签定义。
八、裁剪和蒙版
- 裁剪：使用
<clipPath>标签定义裁剪路径。 - 蒙版：使用
<mask>标签实现遮罩效果。
九、动画
SVG支持多种动画效果，包括平移、缩放、旋转和倾斜等。可以通过CSS动画或JavaScript实现更复杂的动画效果。
总结
SVG作为一种强大的矢量图形格式，不仅能够绘制复杂的图形和图表，还支持动画和交互效果。掌握SVG的基本使用方法，可以为Web开发带来更多的可能性。