本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下VG 表示可伸缩矢量图形,这是一门用于描述 2D 图形的语言,图形应用使用 XML 编写,然后 XML 由 SVG 阅读器程序呈现。
SVG 主要用于矢量类型的图表,比如饼图,X,Y 坐标系统中的二维图等等。
SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准,你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。
查看 SVG 文件
大多数 Web 浏览器都可以显示 SVG,就像它们可以显示 PNG,GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便能够在浏览器中查看 SVG。
在 HTML5 中嵌入 SVG
HTML5 允许我们直接使用 __<svg>...</svg> 标签嵌入 SVG,下面是简单的语法:
1 2 3 | < svg xmlns = "http://www.w3.org/2000/svg" >
...
</ svg >
|
HTML5 - SVG 圆
下面是一个 SVG 示例的 HTML5 版本,用 <circle> 标签绘制一个圆:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
< head >
< title >SVG</ title >
< meta charset = "utf-8" />
</ head >
< body >
< h2 >HTML5 SVG Circle</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</ svg >
</ body >
</ html >
|
在启用 HTML5 的最新版 FireFox 中会生成如下结果:
HTML5 - SVG 矩形
下面是一个 SVG 示例的 HTML5 版本,用 <rect> 标签绘制一个矩形:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
< head >
< title >SVG</ title >
< meta charset = "utf-8" />
</ head >
< body >
< h2 >HTML5 SVG Rectangle</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< rect id = "redrect" width = "300" height = "100" fill = "red" />
</ svg >
</ body >
</ html >
|
在启用 HTML5 的最新版 FireFox 中会生成如下结果:
HTML5 - SVG 线条
下面是一个 SVG 示例的 HTML5 版本,用 <line> 标签绘制一个线条:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html>
< head >
< title >SVG</ title >
< meta charset = "utf-8" />
</ head >
< body >
< h2 >HTML5 SVG Line</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< line x1 = "0" y1 = "0" x2 = "200" y2 = "100"
style = "stroke:red;stroke-width:2" />
</ svg >
</ body >
</ html >
|
你可以使用 style 属性给它设置额外的样式信息,比如笔画,填充色,笔画宽度等等。
在启用 HTML5 的最新版 FireFox 中会生成如下结果:
HTML5 - SVG 椭圆
下面是一个 SVG 示例的 HTML5 版本,用 <ellipse> 标签绘制一个椭圆:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
< head >
< title >SVG</ title >
< meta charset = "utf-8" />
</ head >
< body >
< h2 >HTML5 SVG Ellipse</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
</ svg >
</ body >
</ html >
|
在启用 HTML5 的最新版 FireFox 中会生成如下结果:
阅读剩余部分
相关阅读 >>
HTML5多线程javascript解决方案web worker-专用worker和共享worker的详细代码介绍
HTML5应用缓存与web workers的图文详解
如何用HTML5中的canvas实现渐变文字的效果
h5元素/属性/格式化的详细介绍
最全的HTML5标签
h5中header标签应该如何使用
基于HTML5的web scada报表的图文代码分析
HTML5 移动端自适应布局
HTML5设置视频背景的方法介绍
HTML5中关于canvas画图之画圆形的实例介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于使用HTML5进行SVG矢量图形绘制的代码