当前第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与html的区别有哪些?HTML5与html四大区别总结
介绍HTML5+canvas调用手机拍照功能实现图片上传(上篇)
HTML5的表单中关于所有type类型的详细介绍
h5链接的使用
HTML5 web worker的介绍(附示例)
HTML5 navigator.geolocation基于浏览器获取地理位置代码案例
分享HTML5实现弹出框的效果示例
通过HTML5实现图片上传与预览功能
炫酷实用的jquery/HTML5菜单图文详解
对tap事件和tap点透原理的分析
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于使用HTML5进行SVG矢量图形绘制的代码