基于SVG技术的图像显示
2006-02-16 20:10
405 查看
从本质上来说,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文档,显示复杂的图像效果。
①所有的标记都有开始标记和结束标记,否则必须注明为空标记。空标记用反斜杠结束,如<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文档,显示复杂的图像效果。
相关文章推荐
- 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
- 基于DSP的彩色TFT-LCD数字图像显示技术研究
- 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
- 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。
- 论文笔记 | 基于深度学习的图像语义分割技术概述之5.1度量标准
- 图像检索:基于内容的图像检索技术
- 基于GPU的图像处理技术
- 基于FPGA的彩色图像显示
- 使用QT搭建点云显示框架系列五·基于QT的QML图像选点、动态绘制十字丝功能 ,以及纹理映射
- poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
- 基于内容图像检索的关键技术研究
- 图像处理------基于像素的皮肤检测技术 分类: 视频图像处理 2015-07-24 09:56 28人阅读 评论(0) 收藏
- 图像检索:几类基于内容的图像分类技术
- 基于深度学习的图像匹配技术专题- [patch based matching3]-mnist siamese 学习
- 基于深度学习的图像匹配技术专题- [patch based matching4]-手把手教你实现MatchNet
- 一个基于opencv的显示一个rgb图像各点灰度值及对应的灰度图象灰度值的程序
- 基于内容的图像检索技术(3)
- 计算机视觉小实例 No.1 基于直方图优化的图像去雾技术
- 基于深度学习的图像语义分割技术概述之4常用方法
- 基于Asp.net、SVG技术的WebGIS研究与实现