当前第2页 返回上一页

HTML5 - SVG 多边形
下面是一个 SVG 示例的 HTML5 版本,用 <polygon> 标签绘制一个多边形:
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 Polygon</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< polygon points = "20,10 300,20, 170,50" fill = "red" />
</ svg >
</ body >
</ html >
|
在启用 HTML5 的最新版 FireFox 中会生成如下结果:

HTML5 - SVG 折线
下面是一个 SVG 示例的 HTML5 版本,用 <polyline> 标签绘制一个折线图:
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 Polyline</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
</ svg >
</ body >
</ html >
|
在启用 HTML5 的最新版 FireFox 中会生成如下结果:

HTML5 - SVG 渐变
下面是一个 SVG 示例的 HTML5 版本,用 <ellipse> 标签绘制一个椭圆,使用 <radialGradient> 标签定义一个 SVG 径向渐变。
我们可以以类似的方式用 <linearGradient> 标签创建 SVG 线性渐变。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html>
< head >
< title >SVG</ title >
< meta charset = "utf-8" />
</ head >
< body >
< h2 >HTML5 SVG Gradient Ellipse</ h2 >
< svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg" >
< defs >
< radialGradient id = "gradient" cx = "50%" cy = "50%" r = "50%"
fx = "50%" fy = "50%" >
< stop offset = "0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
< stop offset = "100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</ radialGradient >
</ defs >
< ellipse cx = "100" cy = "50" rx = "100" ry = "50"
style = "fill:url(#gradient)" />
</ svg >
</ body >
</ html >
|
在启用 HTML5 的最新版 FireFox 中会生成如下结果:

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何使用HTML5
File接口在web页面上使用文件下载
html5如何实现图片转圈的动画效果
HTML5的Canvas实现绘制曲线的方法
以上就是关于使用HTML5进行SVG矢量图形绘制的代码的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
畅谈HTML5 到底是什么?
HTML5中设置或返回音频/视频是否应该被静音的属性muted
HTML5支持所有音频格式吗
HTML5 高级教程--拖放 api 实现拖放排序
HTML5中的<aside>元素与<article>元素 实例详解
head标签中有什么属性?
HTML5容易被忽略的小知识
HTML5是什么意思
断点续传原理是什么?怎么利用HTML5实现文件断点续传
ichart-组件定制图形库图表/报表开发教程
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于使用HTML5进行SVG矢量图形绘制的代码