SVG学习

svg

MDN较为详细

地址：https://developer.mozilla.org/zh-CN/docs/Web/SVG

svg: scalable vector graphics 可缩放矢量图

1. 该图片使用代码书写而成
2. 缩放不会失帧
3. 内容轻量

如何使用

svg 可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

书写svg

基本格式举例：

fill，填充颜色，取值transparent（透明）
stroke，边框
stroke-width，边框宽度

矩形

宽，高，x坐标，y坐标，填充色，边框，边框宽度

圆形

cx圆心X坐标

cy圆心y坐标

椭圆

rx横向椭圆半径

ry纵向椭圆半径

线条

由两个坐标连接

折线

由坐标依次连接

多边形

画五角星

由坐标依次连接

路径

• M = moveto（起始坐标）
• L = lineto（画线）
• H = horizontal lineto（横线）
• V = vertical lineto（垂直线）
• C = curveto（曲线）
• S = smooth curveto（平滑曲线）
• Q = quadratic Belzier curve（二次Belzier曲线）
• T = smooth quadratic Belzier curveto（光滑的二次贝尔齐尔曲线）
• A = elliptical Arc（椭圆弧）
• Z = closepath（闭合）

A（椭圆）的使用：

• rx ry
• 顺时针旋转角度
• 小弧（0）或 大弧（1）
• 顺时针（1）或 逆时针（0）
  太极图

stroke属性

1、stroke

边框色，属性定义一条线，文本或元素轮廓颜色

2、stroke-width

文本或元素轮廓厚度

3、stroke-linecap

Stroke-linecap属性定义线段端点的风格，
属性值：

• butt
• square
• round

stroke-linecap="square"

4、stroke-dasharray

用于创建虚线

举例：stroke-dasharray="20,10,5,5,5,10"

5、stroke-opacity

属性设置边框的透明度，值的范围从0到1，

举例：stroke-opacity="1"

6、stroke-linejoin

属性设置线条拐弯处的连接方式，属性值：

• miter
• round
• bevel

举例：stroke-linejoin="bevel"

线性渐变——linearGradient

标签必须嵌套在 的内部。 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

• 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
• 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
• 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

标签的 id 属性可为渐变定义一个唯一的名称

fill:url(#red_green) fill="url(#red_green)"属性把 需要渐变的图形元素链接到此渐变

标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置

渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置。

放射性渐变——radialGradient

标签必须嵌套在 中。 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义

cx、cy 和 r 属性定义外圈，fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成

• r是外圈的半径，（cx，cy）为外圆圆心坐标
• （fx，fy）为内圆圆心坐标

每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置。

举例：

svg滤镜

在 SVG 中，可用的滤镜有：

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur——创建模糊效果

• feImage

• feMerge

• feMorphology

• feOffset——创建模糊效果

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

必须在 标签中定义 SVG 滤镜

标签必须嵌套在 标签内

• 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
• filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
• 滤镜效果是通过 标签进行定义的。fe 后缀可用于所有的滤镜
• 标签的 stdDeviation 属性可定义模糊的程度
• in="SourceGraphic" 这个部分定义了由整个图像创建效果