参考:
w3school => svg-v1.1
svg-mdn
菜鸟教程
参考手册
百度文库-svg基础
其他网站:
与其他文件类型进行转换:链接
显示 svg 工具:链接 | 链接
what
SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),即放大或者缩小不失真,使用 XML 格式定义图形。
包含形状、样式、标记、滤镜、渐变等。
预定义了七种形状元素:矩形(rect)、圆形(circle)、椭圆(ellipse)、线段(line)、折线(polyline)、多边形(polygon)、路径(path)
。
why
与其他图像格式相比,使用 SVG 的优势有以下几点:
- SVG 可被非常多的工具读取和修改(比如记事本)
- SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
- 相比 css 来讲,兼容性更好,早于 css3 实现一些特殊效果,功能强大
适用于 大型渲染区域,如百度地图,不适合游戏。用途:
- 静态图形绘制
- 动态动画效果
- 专门事件绑定
how
入门实例
要点说明:
- 以 svg 标签包含,version 为 svg 的版本,xmlns 定义 svg 命名空间
- circle 标签创建一个圆,cx 和 cy 属性定义圆的中心坐标,默认是(0,0),r 为半径, fill 为填充颜色, stroke-width 为边框宽带
坐标定位
对于所有元素,SVG 使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多)。这种坐标系统是:以页面的左上角为 (0,0) 坐标点,坐标以像素为单位,x 轴正方向是向右,y 轴正方向是向下。注意,这和你小时候所教的绘图方式是相反的。但是在 HTML 文档中,元素都是用这种方式定位的。
内置图形的 html 属性 或 css 样式
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
stroke-linecap(路径的终结样式)
transform(变换)
filter(滤镜)(url[#滤镜id])
常见图形用法
1. 矩形(rect)
试一试
- x 属性定义矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
- y 属性定义矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
- rx 和 ry 属性可使矩形产生圆角。
2. 圆形(circle
- cx 属性定义的椭圆中心的x坐标
- cy 属性定义的椭圆中心的y坐标
3. 椭圆(ellipse)
- rx 属性定义的水平半径
- ry 属性定义的垂直半径
4. 线段(line)
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
5. 折线(polyline)
6. 多边形(polygon)
标签用来创建含有不少于三个边的图形。
多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。
- points 属性定义多边形每个角的 x 和 y 坐标
7. 路径(path)
- d 路径数据:
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepath
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
8. 文本(text)
9. 和
所有互联网的SVG
滤镜定义在
元素中。
元素定义短并含有特殊元素(如滤镜)定义。
标签用来定义SVG滤镜。
定义可复用的部件 定义统一的样式
10. 事件
常用的时间有 onclick \ onactivate \ onmousedown \ onmouseup \ onmouseover \ onmousemove \ onmouseout \ onload \ onresize \ onunload \ onrepeat
svg 嵌入 Html 中
svg 滤镜
新增参考连接:链接->点击 | 链接2
SVG可用的滤镜是(19个):
feBlend - 与图像相结合的滤镜
feColorMatrix - 用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting - 散射光照明
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - 过滤阴影
feSpecularLighting - 镜面照明
feTile
feTurbulence
feDistantLight - 用于照明过滤
fePointLight - 用于照明过滤
feSpotLight - 用于照明过滤
可以用滤镜实现想要的模糊、阴影等等效果(用来增加对SVG图形的特殊效果),类似 css 滤镜中blur()、contrast()、drop-shadow()
, for example:
-
元素id
属性定义一个滤镜的唯一名称 -
in="SourceGraphic"
这个部分定义了由整个图像创建效果 -
元素的滤镜属性用来把元素链接到"f1"
滤镜 - result 用于 中间结果的输出(也称作 primitives 图元),其他滤镜可以使用 in 属性导入 result
- in2 用于接收某个 result 输出,在此效果上面进行过滤
多个滤镜合并使用
在不同的滤镜利用 result 和 in 属性,可以实现在前一个基本变换基础上建立另一个操作。其中可能涉及的标签可能有feComposite|feMerge|feFlood
等。
-
feMerge
滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果。 - 遵循 后输入 的层级更高的原则。
标签属性
基本每个滤镜标签都有的属性:
x,y - 坐标
width,height - 宽|高
result - 定义一个滤镜效果的输出名称,以便 in
in - 指定滤镜效果的输入源,可以是某个 result ,也可以是下面 6 个值:
SourceGraphic - 图形元素本身作为 输入源
SourceAlpha - 与 SourceGraphic,相比不同在于 只使用元素的非透明部分
BackgroundImage
BackgroundAlpha
FillPaint
StrokePaint
混合模式
css 中,有混合模式 mix-blend-mode
和 background-blend-mode
。
svg 中有 5 个 - normal(正常) | multiply(正片叠底) | screen(滤色) | darken(变暗) | lighten(变亮)
该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值([红,绿,蓝,透明度]的矢量)都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。
// 包含两个私有属性
type: saturate | hueRotate | luminanceToAlpha | matrix
values: 0.0 - 1.0 | 0.0 - 360 | 只有一个效果 | 4x5 的矩阵
saturate 和 hueRotate 与 css 中 filter 中的 saturate 和 hue-rotate 作用一模一样。
图形的表示:数字图形的本质是一个多维矩阵,把图像的R分量放进红色通道里,B分量放到蓝色通道里,G分量放到绿色通道里,经过处理,显示在屏幕上的是我们看到的彩色图像。
// 矩阵计算得到 rgba() 值
/*R G B A 1*/
1 0 0 0 0 = 1*R + 0*G + 0*B + A*0 + 0 //R
0 1 0 0 0 = 0*R + 1*G + 0*B + A*0 + 0 //G
0 0 1 0 0 = 0*R + 0*G + 1*B + A*0 + 0 //B
0 0 0 1 0 = 0*R + 0*G + 0*B + A*1 + 0 //A
两种光源及其他
光照滤镜
是 svg 区别于 css 的独特魅力。
feSpecularLighting(镜面照明) | feDiffuseLighting (散射光照明)
都为光照滤镜,使用它们照亮一个源图形。
feDiffuseLighting
: 来自外部光源,适合模拟太阳光或者灯光照明
feSpecularLighting
: 指定从反射面反射的二次光
形态滤镜
feMorphology
:形态滤镜,输入源是 图形的 alpha 通道,利用 operator 设置腐蚀(变薄 erode)或者扩张(加粗 dilate), 默认 erode, radius 标识笔触的大小,该模式下的效果程度,默认 0 。
纹理滤镜
turbulence 为 湍流,不稳定气流,svg 能够实现半透明或者波状图像,利用 Perlin 噪声函数 可以实现 人造纹理。
feTurbulence
: 可以创建纹理图作为置换图,不需要借助外部图形的纹理效果,即可创建复杂的效果。三个需要注意的属性:
type - fractalNoise (分形噪声更加平滑,更接近云雾)| turbulence (湍流噪声)
baseFrequency - 噪声函数的基本频率的参数,频率越小,产生的图形越大, 取值在 0.02 ~ 0.2
numOctaves - 噪声函数的精细度,数值越高,噪声更详细,默认值为 1
示意两种噪声效果
映射置换滤镜
feDisplacementMap
为映射置换滤镜,需要掌握很多 PhotoShop 纹理创建或者是图形色彩相关的知识。使用该滤镜用于改变元素和图形的像素位置,将遍历原图的所有像素点,映射到新的位置,形成新图形。可以将纹理滤镜过后的图形进行形变、扭曲、液化等等,转化的一个公式-P(x + scale * (XC*(x,y) - 0.5, y + scale * (YC*(x,y) - 0.5) → P(x,y)
。
svg 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型:
- Linear(线性渐变
) - Radial(放射渐变
)
标签必须嵌套在
的内部。
线性渐变可以定义为水平,垂直或角渐变:
- 当y1和y2相等,而x1和x2不同时,可创建水平渐变
- 当x1和x2相等,而y1和y2不同时,可创建垂直渐变
- 当x1和x2不同,且y1和y2不同时,可创建角形渐变
- 可以利用
class
或者id
在style
里面写fill
或者filter
。url
是 css 滤镜属性的关键字之一,允许引入特定的 svg 过滤器,极大增强了 css 滤镜的能力。
好用的库
svg.js
- 更加接近原生 svg 语法,可以直观的操作 svg。svg.js 更快,兼容性好,上手更方便。
- 免费开源。轻量级,总共只有16kb。
Snap.svg
- Snap.svg 更接近 jquery 的语法,其更全,功能丰富。
- JavaScript库,可以跨任何类型的 svg 工作,包括从 Illustrator\InkScape 或者 HTML。
其他
Paper.js, 拉斐尔, Two.js, Velocity.js, Vivus.js
如果您都能看到这里了,对您有用的话,可以点个赞不@*@