前端必备知识点—SVG

基本内容

什么是SVG? 全称为Scalable Vector Graphics，是一种使用XML技术描述二维图形的语言，简单来说 - 矢量图(不失真)

SVG与HTML5的关系

早在HTML5之前,存在SVG技术

SVG文件扩展名为".svg"

在HTML5出现之前,要在HTML页面中引入SVG文件

在HTML5出现之后,将SVG内容直接定义在HTML页面中

SVG的优势

可以使用文本编辑器创建和修改，SVG可被搜索、索引等，SVG绘制的图像不失真的

SVG与Canvas的区别

SVG不依赖于分辨率，使用DOM或绑定事件，实现大型渲染区域的应用(地图类)

Canvas依赖于分辨率，不能使用DOM或绑定事件的，运行时以图片形式出现".jpg"

SVG的标准也是W3C定制的

设置样式

1.通过元素的属性方式

fill - 设置填充样式

fill-opacity - 设置填充透明度

stroke - 设置描边样式

stroke-width - 设置边框的宽度

2.通过style属性,使用类似于CSS属性设置方式

注意 - 不能使用CSS中的样式进行设置

transform属性，用于设置转换效果

方法有：rotate()、scale()、translate()

绘制图形

矩形元素- <rect>元素

<rect x="" y="" width="" height="" rx="" ry="" />

x和y - 绘制矩形的左上角坐标值

width和height - 设置绘制矩形的宽度和高度

rx和xy - 设置圆角矩形

圆形元素 - <circle>元素

<circle cx="" cy="" r="" />

cx和cy - 绘制圆形的圆心坐标值

cx和cy不设置值的话,默认为(0,0)

r - 绘制圆形的半径

椭圆元素- <ellipse>元素

<ellipse cx="" cy="" rx="" ry="" />

cx和cy - 绘制椭圆的圆心坐标值

rx - 绘制椭圆的水平方向的半径

ry - 绘制椭圆的垂直方向的半径

注意：当rx和ry的值相同时,绘制的是圆形

线条元素- <line>元素

<line x1="" y1="" x2="" y2="" />

x1和y1 - 绘制直线的起点坐标值

x2和y2 - 绘制直线的终点坐标值

注意：绘制直线时,默认描边颜色为白色

折线元素 - <ployline>元素

<polyline points="" />

points - 折线的所有点坐标值,都设置在该属性中

注意：描边颜色默认为白色,填充颜色默认为黑色

多边形元素- <polygon>元素

<polygon points="" />

points - 折线的所有点坐标值,都设置在该属性中

注意： SVG绘制图形使用元素

单标签 - 增加结束符"/"

起始标签

特效元素

线性渐变 - 基准线

<defs>

<linearGradient id="grad" x1="基准线的起点坐标值x" y1="基准线的起点坐标值y" x2="基准线的终点坐标值x" y2="基准线的终点坐标值y">

<stop offset="0%~100%" stop-color="颜色" />

</linearGradient>

</defs>

<rect fill="url(#渐变元素的id)">

射线渐变 - 基准圆

<defs>

<radialGradient id="grad" fx="设置起点基准圆的圆心x" fy="设置起点基准圆的圆心y" cx="设置终点基准圆的圆心x" cy="设置终点基准圆的圆心y" r="设置终点基准圆的半径">

<stop offset="0%~100%" stop-color="颜色" />

</radialGradient>

</defs>

<rect fill="url(#渐变元素的id)">

注意：线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为大于 100% 的值

设置渐变颜色位置必须是百分值

只能是从 0% ~ 100%

滤镜元素 - 高斯模糊

滤镜元素 - <filter>元素

高斯模糊 - <feGaussianBlur>元素