-- 作者：求索
-- 发布时间：1/6/2006 3:56:00 PM
-- 本人整理的一些关于svg的知识点
从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性：
1.所以的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如<rect />。
2.标记必须正确嵌套。 如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，<g><text>Hello there!</text></g> 是正确的，但 <g><text>Hello there!</g></text> 不正确。
3.文档必须只有一个根。正如一个 <html></html> 元素包含了一个 HTML 页面的所有内容一样，一个 <svg></svg> 元素也包含一个 SVG 文档的所有内容。
4.文档应该以 XML 声明<? xml version=”1.0” ?>开始。
5.文档应该包含一个 DOCTYPE 声明， 该声明指向一个允许元素的列表。SVG 1.0 文档的 DOCTYPE 声明是： <?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 基本svg形状
每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：
1.圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
2.椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
3.矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。
4.线（line）：显示两个坐标之间的连线。
5.折线（polyline）：显示顶点在指定点的一组线。
6.多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。
下面的示例演示了这些形状： <?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>Basic shapes</desc>
<g>
<circle cx="50" cy="50" r="25" />
<ellipse cx="75" cy="125" rx="50" ry="25" />
<rect x="155" y="5" width="75" height="100"/>
<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />
<line x1="0" y1="150" x2="400" y2="150"
stroke-width="2" stroke="blue"/>
<polyline points="50,175 150,175 150,125 250,200" />
<polygon points="350,75 379,175 355,175 355,200 345,200
345,175 321,175" />
<rect x="0" y="0" width="400" height="200"
fill="none" stroke="red" stroke-width="3" />
</g>
</svg> 渲染顺序
当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面”出现。在一个 HTML 页面上，使用z-index属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。
如果指定一个元素没有填充色（使用fill=”none”"），那么在它下面的各项会显现出来。
属性:
fill：该属性指定用来填充对象内部区域的颜料。大多数情况下，该属性只是一种颜色，但它也可以是渐变或图案（会在图案中介绍）。这个值通常是关键字、颜色说明或指向预定义元素的 URI。
fill-opacity：该属性指定元素的透明性。值的范围从完全透明（0）到完全不透明（1）。
stroke：该属性指定元素外边框的外观。象 fill 一样，它引用颜料，尽管通常将它指定为一种简单颜色。
stroke-width：该属性指定笔划线的宽度。
stroke-linecap：该属性确定线末端的形状，可取的值有粗端（缺省值）、圆和正方形。
stroke-linejoin：该属性确定对象各角的外观。允许的值有直角（缺省值）、圆和斜角，它如示例中所示将尖角的边缘“剪掉”。
stroke-dasharray：该属性是一个整数系列（如 3、2、3、2、4、3、2 和 3），它允许对虚线中每一划的相对长度进行控制。
stroke-opacity：类似于 fill-opacity，该属性确定元素笔划线的相对透明性。 您可以在下面看到这些属性的一些示例：
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Stroke and fill</desc>
<defs>
<!--渐变-->
<linearGradient id="lineGradient">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="yellow" />
</linearGradient>
<polygon id="lens" points="65,50 185,50 185,75, 150,100
100,100 65,75"
fill="pink" stroke="purple" stroke-width="4"
fill-opacity=".5"/>
. . .
</defs>
<g>
. . .
<line x1="65" y1="50" x2="310" y2="50"
stroke="plum" stroke-width="2"/>
<!-- Box with gradient along the outside -->
<rect x="50" y="125" width="275" height="40" fill="orange"
stroke-width="6" stroke="url(#lineGradient)" /> <!-- Purple line with rounded edges -->
<line x1="65" y1="190" x2="310" y2="190"
stroke="purple" stroke-width="20"
stroke-linecap="round"/>
<!-- Blue polygon with beveled corners -->
<polygon points="50,250 100,225 300,225 200,275" stroke="blue"
fill="none" stroke-width="10" stroke-linejoin="bevel" />
</g>
</svg> 路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）或闭合的（如多边形），并可以包含一条或多条线、曲线和线段。 最基本的路径由几条线段组成。例如： <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="400"
xmlns="http://www.w3.org/2000/svg">
<desc>A simple path</desc>
<rect x="1" y="1" width="350" height="350"
fill="none" stroke="blue" />
<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
fill="red" stroke="blue" stroke-width="3" />
</svg> 上述代码根据提供的指令生成一个简单的多边形。这些指令如下所示： M 100 100 ：移至点 100, 100。
L 300 50 ：画一条线至点 300, 50。
L 300 250 ：画一条线至点 300, 250。
L 100 300 ：画一条线至点 100, 300。
Z ：通过将线画回到原始点闭合此形状。（更具体地说，回到最近一条“move”命令所指定的点。）
其它简单的线命令包括作水平线的 H （或 h）和作垂直线的 V （或 v）。
|