SVG开发学习

SVG中可以添加三种基本的物件:文本,图形和路径。

SVG文本(text):
<text style="fill:blue;" y="15">blueknight</text>

 

SVG图形：
1、矩形
<rect style="fill:yellow;" width="300" height="100"/>

2、圆
<circle style="fill:blue;stroke:red;"cx="200"y="200"r="100"/>

 

<path style="fill:blue;stroke:red;"d="M200,100c0,55.23-44.77,100
-100,100S0,155.23,0,100S44.77,0,100,0s100,44.77,100,100z"/>

 

SVG路径(path):
路径使用下面的属性来描述:
"moveto" 设置新的坐标点
"lineto" 画一条直线
"curveto" 使用贝赛尔函数画制曲线
"arc" 画椭圆和圆
"closepath" 闭合路径

 

<path d="M 50 10 L 350 70 L 100 120 z"/>
"M"代表moveto,设置坐标点,"L"代表"lineto",画一条直线,z代表结束。

 

SVG样式表(CSS):
                        内部样式表,植入式样式表,外部样式表。

植入式样式表：
.st2{fill:none;stroke:#990000;stroke-width:2;}

 

SVG填充(fill)：
"填充"(fill)>>
fill后面可使用的值: none, current-color, (color)
"none"是无色,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。

 

"填充规则"(fillrule)>>
fillrule后可使用的值: evenodd, nonzero, inherit
填充规则属性定义对所有路径区域填充或者只是对交叉部分填充
"inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。

 

"填充透明度"(fill-opacity)>>
fill-opacity后可使用的值: 0到1的任何数
填充透明度决定了一个物件的填充是实色填充(透明度数值为1)还是透明的填充(透明度数值为0).关于物件的透明度属性其他还有如:"笔划透明度"(stroke-opacity),对应于笔划的透明程度;"透明"(opacity),对应于物件整体的透明程度。

 

SVG笔划(stroke):
"笔划"(stroke)>>
stroke后面可使用的值: none, current-color, (color)
笔划属性决定了物件是否利用笔划进行勾勒,并且使用什么样颜色的笔画。"none"是无色,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜色值,(color)是自定义的色彩。

 

"笔划宽度"(stroke-width)>>
stroke-width后可使用的值是: (width), inherit
"笔划宽度"默认值是1像素宽度。用户也可以自定义宽度,可以使用像素值也可以使用百分比。这里的所有SVG图像都使用的是像素值."inherit"代表继承前面(父)的物件(或物件组)的笔划属性。

 

"笔划端点"(stroke-linecap)>>
stroke-linecap可使用的值是: butt, round, square, inherit
"笔划端点"的属性定义了开放笔划(未闭合)的端点的形状,分别是"粗大的"butt,"圆滑的"round,"平整的"square和"继承 的"inherit.

 

"笔划连接"(stroke-linejoin)>>
stroke-linejoin可使用的值是:miter, round, bevel, inherit
笔划连接属性定义了路径拐角的形状,"miter"是默认值,"round"光滑连接,"bevel"折线连接,"inherit"继承

 

"笔划圆角连接"(stroke-miterlimit)>>
stroke-miterlimit后可使用的值是: (miterlimit), inherit
"笔划圆角连接"定义了两条相交成一定角的线在连接处的圆滑程度。数值必须为大于1的整数,默认的值是8。

 

"虚线笔划"(stroke-dasharray)>>
stroke-dasharray后可使用的值是:(dasharray), inherit
<path style="stroke-dasharray:12 12">
虚线笔划定义了使用虚线的虚化程度

 

SVG梯度(Gradients):
梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的色彩渐变。SVG支持线式的(linear)和圆式的(radial)色彩梯度变化。

 

梯度属性的实现利用了(defs)标签(元素),这个标签包含了填充和笔划属性,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。

 

<defs>
   <radialGradient id="gradient1" cx="150.0005"cy="100" r="113.7914" fx="150.0005" fy="100">
 <stop offset="0.19" style="stop-color:#FFFF00"/>
 <stop offset="0.4782" style="stop-color:#FFD00D"/>
 <stop offset="1" style="stop-color:#FE7312"/>
   </radialGradient>
</defs>

 

SVG滤镜:
<svg width="4in" height="3in">
  <defs>
    <filter id="CoolTextEffect">
      <!-- Definition of filter goes here -->
    </filter>
  </defs>
  <text style="filter:url(#CoolTextEffect)">Text with a cool effect</text>
</svg>

 

两个关键的属性就是SourceGraphic和SourceAlpha.SourceGraphic表示了需要被滤镜的原始物件,例如图形,文 本.SourceAlpha和SourceGraphic属性上基本类似,但包含了一个alpha通道。这样可以通过alpha通道的值实现滤镜的功能。

　　通过简单滤镜的组合,还可以产生更加丰富和多样的效果来。一般,图像滤镜效果的产生首先是结合简单滤镜形成总的效果然后叠加入图像中产生最终图像。

<filter id="MyFilter">
 <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
 <feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/>
 <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="specularOut">
   <fePointLightx="-5000" y="-10000" z="20000"/>
 </feSpecularLighting>
 <feComposite in="specularOut" in2="SourceAlpha"operator="in" result="specularOut"/>
 <feComposite in="SourceGraphic" in2="specularOut"operator="arithmetic" k1="0" k2="1" k3="1"k4="0" result="litPaint"/>
 <feMerge>
  <feMergeNode in="offsetBlurredAlpha"/>
  <feMergeNode in="litPaint"/>
 </feMerge>
</filter>

 

SVG和当前的标准网络图像(JPEG,GIF,PNG):
image xling:href="/ "

 

SVG支持ICC色彩模式:
SVG文件可以自由的制定所使用的色彩模式。使用ICC色彩模式需要定义(icc-color)属性。SVG文件默认的色彩是sRGB色彩,但是你可以通过(icc-color)转换到ICC色彩。

 

　　下面的例子中同时使用了两种色彩定义,当用户系统支持ICC色彩模式时(win98和Mac OS已经自动安装),就会以ICC模式显示下面的"S V G",填充色#900000,笔划色#800080。否则按照填充色红色,笔划色#0000FF显示。
 
fill:red icc-color(myRGB,90,0,0);fill-opacity:.5;
stroke:#0000FF icc-color(myRGB,128,0,128);

SVG的变形属性:
"矩阵"( (a)(b)(c)(d)(e)(f) )>>
"矩阵"定义了一个2*3的矩阵(或者看作六个数的一个数列). 它和元素相匹配.详细请参看下面其他"变化"的解释来理解.

 

"移动"( (tx)[(ty)] )>>
"移动"属性的设置将移动元素.(tx)的值沿着x轴,(ty)的值沿着y轴.在六数数列中(即一个矩阵),数列的最后两位为(tx)(ty).

如果要放缩元素而元素又不在中心点(0,0),那么你必须先将元素移动使元素中心在中心点,然后执行"比例',元素放缩后,再将元素移动回到原来的位置.例如,要把一个在(150,100)出的元素缩小到50%,你需要执行下列步骤:
　　1. "移动"(150,100)
　　2. "比例" .5
　　3. "移动"(-150,-100)
　　(请注意次序)

 

"旋转"( (rotate-angle) )>>
"旋转"属性的设置可以控制元素绕着中心点(0,0)旋转任意角度(rotate-angle).例如,如果角度值(rotate-angle)为45 度,元素将会顺时针旋转45度.就像在"比例"中我们做的,如果元素不在中心点,我们首先要将它移动到中心点,然后旋转,再将它移回原来的位置.

 

"x轴倾斜">>
"x轴倾斜"将在中心点(0,0)把元素在x轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"x轴倾斜"角度(angle)在第三位以弧度表示.

 

"y轴倾斜">>
"y轴倾斜"将在中心点(0,0)把元素在y轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"y轴倾斜"角度(angle)在第二位以弧度表示.

 

SVG动画:
颜色动画>>
(animateColor)元素定义了SVG颜色动画的属性.

<animateColor attributeName="fill" attributeType="CSS" values="red;blue;yellow;green;red" dur="10s" repeatCount="indefinite" />
attributeName定义了色彩动画的性质,即填充变色,attributeType定义为SVG规范中已经给出 的具有动画性质的CSS(串接样式表 Cascading Stylesheets－简称CSS).其他的attributeType还有"XML"(动态标识语言)和"auto"(默认设置).

 

需要产生动画的元素知道了要对什么进行动画,(上面的例子中元素就是被标识的"gradient_star"),它还需要知道怎样进行变化来长生动画.这需要下面的属性值来描述:

 

from 定义起始数值
to 定义结束数值
by 定义相对的偏移值
values 一张相对分离的数值表

 

利用标签dur和repeatCount控制动画的时间属性.色彩动画总的持续时间由dur决定,在这个例子中是10秒,动画的循环次数由 repeatCount定义,本例中repeatCount的值是不定值"indefinite",动画将无限循环播放下去.

 

运动路径>>
(animateMotion)标签允许元素产生一些简单的旋转,放缩,移动和倾斜变化.

 

在(animateMotion)标签里添加路径数据,SVG元素将可以沿着路径产生运动.
"旋转"rotate属性控制SVG元素沿着特定路径运动时 的的旋转性质.旋转的值可以是一个相对于当前用户的图形系统中所给定的x轴定义的一个角度值,也可默认为"auto",即沿着路径方向旋转,或 是"auto-reflect",沿着路径方向的180度反方向旋转.在上面的例子中,沿垂直的八字形运动的元素旋转的值是-45度,沿着水平八字形运动 的元素旋转的值是"auto".

 

运动控制>>
　　默认的运动一般是线性运动.calcMode的下列属性能进一步控制元素的运动:

 

　　离散
　　动画将在两个数值之间产生跳跃的变化.

 

　　线性
　　默认设置.

 

　　步进
　　类似于线性,但定义了类线性变化的间隔值.

 

　　曲线
　　对应于按照贝赛尔曲线定义的时间-位置曲线.

 

　　关键曲线
　　使用"曲线"模式,能够用最小的定义产生很复杂的变化.例如,实时的控制元素的x和y值,就能对应的实时控制元素的运动.

 

　　使用"曲线"模式,动画元素需要包含keySplines属性值.keySplines定义了贝赛尔曲线的关键控制点,来控制动画的变化.这样的控制允许平滑的产生变化(类似于淡入淡出的平滑效果),这一点在动画中非常重要.