SVG中可以添加三种基本的物件:文本,图形和路径。
SVG文本(text):
blueknight
SVG图形:
1、矩形
2、圆
SVG路径(path):
路径使用下面的属性来描述:"moveto" 设置新的坐标点
"lineto" 画一条直线
"curveto" 使用贝赛尔函数画制曲线
"arc" 画椭圆和圆
"closepath" 闭合路径
"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
虚线笔划定义了使用虚线的虚化程度
SVG梯度(Gradients):
梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的色彩渐变。SVG支持线式的(linear)和圆式的(radial)色彩梯度变化。
梯度属性的实现利用了(defs)标签(元素),这个标签包含了填充和笔划属性,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。
SVG滤镜: