HTML5 学习总结（四）canvas绘图 WebGL SVG(5)_H5之家 - 中国HTML5教程资源分享第一站

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。

3.1、SVG Hello Wrold <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>SVG Hello World</title> </head> <body> <svg xmlns='' version='1.1'> <circle cx='100' cy='100' r='30' stroke='blue' stroke-width='2' fill='red' /> </svg> </body> </html>

运行结果：

svg是一个新增加标签，xmlns是命名空间，version是svg的版本，circle标签就是对svg要展示的图像进行描述，cx与cy表示位置，r表示半径，stroke是描边样式，stroke-width就线宽，fill是填充样式。浏览器兼容性很好：

3.2、多种引入SVG的方法

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。
SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件

引入方式如下：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>引入SVG的方法</title> <style type='text/css'> body{ background:url(me.svg); } </style> </head> <body> <h4>embed</h4> <embed src='me.svg' type='image/svg+xml' width='108' height='108' /> 优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许） <h4>object</h4> <object data='me.svg' type='image/svg+xml' width='108' height='108'></object> 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准缺点：不允许使用脚本。 <h4>iframe</h4> <iframe src='me.svg' frameborder='0' width='108' height='108'></iframe> 优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许） <h4>直接嵌入</h4> <svg xmlns='' version='1.1' width='108' height='108'> <circle cx='54' cy='54' r='50' stroke='blue' stroke-width='2' fill='blue' /> </svg> 在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。注意：SVG不能直接嵌入到Opera。 <h4>image</h4> <img src='me.svg' width='108' height='108' /> </body> </html>

运行结果：

3.3、画直线

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Line</title> </head> <body> <svg xmlns='' version='1.1' width='500' height='500'> <line x1='0' y1='0' x2='500' y2='500' style='stroke:rgb(0,0,255);stroke-width:3' /> </svg> </body> </html>

参数：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

运行结果：

3.4、画椭圆

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>椭圆</title> </head> <body> <svg xmlns='' version='1.1' width='500' hidden='500'> <ellipse cx='300' cy='80' rx='100' ry='50' style='fill:yellow;stroke:dodgerblue;stroke-width:5' /> </svg> </body> </html>

参数：

CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

运行结果：

3.5、文本与矩形

示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>文本与矩形</title> </head> <body> <svg xmlns='' version='1.1' width='800' height='500'> <text x='0' y='50' fill='blue' style='font-size:30px; font-family: 'microsoft yahei';'>My Teacher Zhangguo</text> <rect x='40' y='60' width='260' height='260' style='fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9' /> </svg> </body> </html>

运行结果：

3.6、向下兼容与图标

IE8并不直接兼容SVG，如果需要显示则可以使用插件，如果不使用插件也有向下兼容的办法。