从本质上来说，SVG文档是XML文档。这就是说SVG文档有某些基本特性：
①所有的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如<rect/>。
②标记必须正确嵌套。如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，<g><text>Hello there!</text></g>是正确的，但<g><text>Hello there!</g></text>不正确。
③文档必须只有一个根。正如一个<html></html>元素包含了一个 HTML页面的所有内容一样，一个<svg></svg>元素也包含一个SVG文档的所有内容。
④文档应该以XML声明<?xml version="1.0"?>开始。
⑤文档应该包含一个DOCTYPE声明，该声明指向一个允许元素的列表。
SVG定义了六种基本形状，这些基本形状和路径可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由fill和stroke属性确定。这些形状是：
①圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
②椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
③矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的x和y半径画成圆角矩形。
④线（line）：显示两个坐标之间的连线。
⑤折线（polyline）：显示顶点在指定点的一组线。
⑥多边形（polygon）：类似于polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。
下面的示例演示了这几个基本形状的简单用法：
<?xml version="1.0"?>
<svg width="400" height="200">
<desc>SVG</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图像还可以包含文本。SVG给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像。例如：
<?xml version="1.0"?>
<svg width="400" height="125">
<desc>SVG</desc>
<g>
<rect x="0" y="0" width="400" height="125" fill="none" stroke="blue" stroke-width="3"/>
<text x="10" y="50" font-size="30">Welcome to the world of</text>
<text x="10" y="100" font-size="40" font-family="Monotype Corsiva" fill="yellow" stroke="red">Scalable Vector Graphics!</text>
</g>
</svg>
SVG 提供的预定义的几种形状当然是有用的，但有时它们还不足以完成工作。特别是在这两种情况下：第一，当图像需要曲线，它不能由多边形或折线创建；第二，当动画或文本需要沿页面上的特定形状前进时。这就需要路径了。路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）或闭合的（如多边形），并可以包含一条或多条线、曲线和线段。
最基本的路径由几条线段组成。例如下面的代码片断：
<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
fill="red" stroke="blue" stroke-width="3" />
上述代码片断是根据提供的指令生成一个简单的多边形。这些指令的含义如下所示：
M 100 100：移至点100, 100。
L 300 50：画一条线至点300, 50。
L 300 250：画一条线至点300, 250。
L 100 300：画一条线至点100, 300。
Z：通过将线画回到原始点闭合此形状。更具体地说，回到最近一条“move”命令所指定的点。
路径命令可以创建三种类型的曲线：
①椭圆曲线是椭圆的一部分，也称为弧。A（或a）命令通过指定起点、终点、x和y轴半径、旋度和方向来创建它们。
②三次贝塞尔曲线由一个起点、一个终点和两个将曲线“拖”向自己的控制点定义。C（或c）命令（指定起点和终点）和S（或s）命令（假设这条曲线从最近的命令终止的地方继续）创建这些曲线。
③二次贝塞尔曲线与其三次贝塞尔曲线类似，不过仅包含一个控制点。Q（或q）和T（或t）命令可以创建这些曲线。
除了这些基本的常见元素之外，SVG还提供大量的更复杂的元素，比如定义可重用部件、样式、颜色、渐变效果、图案、渲染、滤镜、坐标系统、标记、使用CSS属性、动画、交互性等等。将这些元素进行组合，就能够形成复杂的SVG文档，显示复杂的图像效果。
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
