当前第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矢量图形绘制的代码的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter
HTML5如何生成验证码
HTML5单页面手势滑屏切换原理分析
用h5的canvas做出弹幕效果
HTML5实践-三步实现响应式设计的详细介绍
HTML5 form新增的属性
基于 HTML5 canvas 实现的文字动画特效
处理HTML5新标签的浏览器兼容版问题
HTML5之title吸顶功能
HTML5怎么清除canvas
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于使用HTML5进行SVG矢量图形绘制的代码