svg学习日志

svg定义

SVG 意为可缩放矢量图形（Scalable Vector Graphics）
SVG 使用 XML 格式定义图像。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。

什么是svg

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

svg第一映像

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以\ 元素开始，包括开启标签 \ 和关闭标签 \</svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 \ 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。 注释：所有的开启标签必须有关闭标签！

svg形状

svg内置了一些形状提供给我们使用

  • 矩形
  • 圆形
  • 椭圆
  • 线
  • 折线
  • 多边形
  • 路径

矩形

标签

<rect> 标签可用来创建矩形，以及矩形的变种。

参数

  • width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • stroke-width 属性定义边框的宽度
  • stroke 属性定义边框的颜色
  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
  • opacity 定义整个元素的透明值（合法的范围是：0 - 1）
  • rx 和 ry 属性可使矩形产生圆角。

圆形

标签

<circle> 标签可用来创建一个圆。

参数

  • cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
  • r 属性定义圆的半径。
  • stroke属性定义边框的颜色
  • stroke-width 属性定义边框的宽度
  • fill 属性定义填充颜色（rgb 值、颜色名或者十六进制值）

椭圆

标签

标签可用来创建椭圆。

参数

  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径
  • style="fill:white" css样式

直线

标签

<line> 标签用来创建线条。

参数

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

多边形

标签

<polygon> 标签用来创建含有不少于三个边的图形。

参数

  • points 属性定义多边形每个角的 x 和 y 坐标
  • style css样式，里面包括(fill,stroke,stroke-width)

折线

标签

<polyline> 标签用来创建仅包含直线的形状。

参数

  • points 定义折线的每个点的坐标
  • style css样式，里面包括(fill,stroke,stroke-width)

路径

标签

标签用来定义路径。

参数

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto //曲线
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

svg滤镜

简介

SVG 滤镜用来向形状和文本添加特殊的效果。

种类

  • feBlend
    与图像相结合的滤镜
  • feColorMatrix
    用于彩色滤光片转换
  • feComponentTransfer
    滤镜的主要作用为每个像素点颜色的转换，包括亮度、对比度、色彩平衡的调整等。 其采用的方法为对每一个颜色通道进行独立的操作。 feComponentTransfer拥有四个子元素： feFuncR、feFuncG、feFuncB、feFuncA， 分别对输入值的红色、绿色、蓝色与透明度四个通道的值进行数值处理。 四个子元素包括以下常用属性： type：每一个通道下数值处理的方法类型。 取值：identity / table / discrete / linear /gamma。 identity：颜色值不变化。 table：颜色值根据提供的tableValues值进行转变。 tableValues为n个值，v0，v1，...，vn-1，0=< v <= 1，值从v0到vn-1依次增大，将颜色通道分为n-1个范围。
  • feComposite
    <feComposite> 命令的作用是将两个图按一定规则拼为一个图。需要指定一个混合模式，混合模式有 arithmetic, over, in, out, atop, xor 六种。arithmetic 为算数模式，有四个参数， k1, k2, k3, k4 需要手工指定；拼合规则是对 [R, G, B, A] 每一个通道做这样的变换： result = k1inin2 + k2in + k3in2 + k4 , in 和 in 2 为两张图每个像素的每个单独通道分量的大小，result 就是合成图像的某颜色通道值。over, in, out, atop, xor 六种混合模式如图所示：
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
    过滤阴影
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
    用于照明过滤
  • fePointLight
    用于照明过滤
  • feSpotLight
    用于照明过滤

高斯滤镜

简介

SVG 滤镜用来向形状和文本添加特殊的效果

参数

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

例子

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0);filter:url(#Gaussian_Blur)"/>
</svg>

一个滤镜id可以被多个图形使用

svg渐变

定义

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

svg的渐变类型

svg线性渐变

<linearGradient> 可用来定义 SVG 的线性渐变。
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：

  • 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
  • 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
  • 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
代码实例
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>
参数说明
  • <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
  • fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
  • linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置。

水平与垂直的渐变是通过<linearGradient>标签来进行控制的。

svg放射性渐变

<radialGradient> 用来定义放射性渐变。 <radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

代码实例
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

</svg>
参数说明
  • <radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，
  • fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，
  • cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 标签来规定。offset 属性用来定义渐变的开始和结束位置。

总结

高斯那部分有点难度，参数与原理有些搞不懂

参考链接

http://blog.csdn.net/yhdsbyhdsb/article/details/45919877
https://googleentrance.wordpress.com/2015/06/22/svg-%E6%BB%A4%E9%95%9C%E5%AD%A6%E4%B9%A0-fecomposite/
http://baike.baidu.com/view/642651.htm
https://en.wikipedia.org/wiki/Gaussian_function