SVG 简介

SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础 如果希望首先学习这些内容,请在本站的首页选择相应的教程。 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG...

SVG 实例

简单的 SVG 实例 一个简单的SVG图形例子: 这里是SVG文件(SVG文件的保存与SVG扩展): <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> ...

SVG 在 HTML 页面

SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。 SVG的代码可以直接嵌入到HTML页面中,或您可以直接链接到SVG文件。 使用 <embed> 标签 <embed>: 优势:所有主要浏览器都支持,并允许使用脚本 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许) 语法: <embed src="circle1.svg" type="image/svg+xml" /> 结果: 使用 <object>...

SVG

SVG Shapes SVG有一些预定义的形状元素,可被开发者使用和操作: 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 下面的章节会为您讲解这些元素,首先从矩形元素开始。 SVG 矩形 - <rect> 实例 1 <rect> 标签可用来创建矩形,以及矩形的变种: 下面是SVG代码: 实例 <svg xmlns="http:/...

SVG

SVG 圆形 - <circle> <circle> 标签可用来创建一个圆: 下面是SVG代码: 实例 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> 尝试一下 » 对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。 代码解析: cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会...

SVG

SVG 椭圆 - <ellipse> 实例 1 <ellipse> 元素是用来创建一个椭圆: 椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的: 下面是SVG代码: 实例 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/> </svg> 尝试一下 » 对于Opera用户:查...

SVG

SVG 直线 - <line> <line> 元素是用来创建一个直线: 下面是SVG代码: 实例 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/> </svg> 尝试一下 » 对于Opera用户:查看SVG文件右键单击SVG图形预览源)。 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性...

SVG

SVG 多边形 - <polygon> 实例 1 <polygon> 标签用来创建含有不少于三个边的图形。 多边形是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。 polygon来自希腊。 "Poly" 意味 "many" , "gon" 意味 "angle". 下面是SVG代码: 实例 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-w...

SVG

SVG 曲线 - <polyline> 实例 1 <polyline> 元素是用于创建任何只有直线的形状: 下面是SVG代码: 实例 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg> 尝试一下 » F对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。 实例 2 只...

SVG

SVG 路径 - <path> <path> 元素用于定义一个路径。 下面的命令可用于路径数据: M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepath 注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。 实例 1 上面的例子定义了一...