内容简介:绘图标签svgSVG 文件可通过以下标签嵌入 HTML 文档:
绘图标签
svg
SVG 文件可通过以下标签嵌入 HTML 文档: <object>
或者 <iframe>
。
SVG的代码可以直接嵌入到HTML页面中,或可以直接链接到SVG文件。
页面中的SVG
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个标题</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="66" cy="50" r="40" stroke="black" stroke-width="2" fill="green" /> </svg> </body> </html>
使用object标签
<object>
标签是 HTML 4 的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。
语法:
<object data="fishc.svg" type="image/svg+xml"></object>
codebase 属性指向下载插件的 URL。
使用iframe标签
<iframe>
标签可工作在大部分的浏览器中。
语法:
<iframe src="rect.svg" width="300" height="100"></iframe>
canvas
<canvas>
标签定义图形,比如图表和其他图像。
<canvas>
标签只是图形容器,必须使用脚本来绘制图形。
语法
<canvas>
标签是 HTML 5 中的新标签。
属性值
属性 | 值 | 描述 |
height | pixels | 设置 canvas 的高度。 |
width | pixels | 设置 canvas 的宽度。 |
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个标题</title> </head> <body> <canvas id="myCanvas" width="333" height="333"></canvas> <script type="text/javascript"> //绘制伞帽 function drawTop(ctx, fillStyle){ ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.arc(0, 0, 30, 0,Math.PI,true); ctx.closePath(); ctx.fill(); } //绘制手柄 function drawGrip(ctx){ ctx.save(); ctx.fillStyle = "cyan";//伞柄色 ctx.fillRect(-1.5, 0, 1.5, 40); ctx.beginPath(); ctx.strokeStyle="cyan";//伞柄下弧 ctx.arc(2.5, 40, 4, Math.PI,0,true); ctx.stroke(); ctx.closePath(); ctx.restore(); } //绘制 function draw(){ var ctx = document.getElementById('myCanvas').getContext("2d"); //canvas,画布50,50坐标处 ctx.translate(50,50); drawTop(ctx,"rgb(255,123,345)"); drawGrip(ctx); } </script> <input type="button" value="开始绘制" onclick="draw()"/> </body> </html>
时间标签
time
<time>
标签用于定义日期或时间。
在任何主要浏览器中,time元素都不会呈现任何特殊内容。
属性
属性 | 值 | 描述 |
datetime | datetime |
定义元素的日期和时间。 如果未定义该属性,则必须在元素的内容中规定日期或时间。 |
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一个标题</title> </head> <body> <p>每天<time>00:00-08:00</time>进入机器职守高防状态</p> <p>时间<time datetime="2018-12-05">现在</time></p> </body> </html>
每天00:00-08:00进入机器职守高防状态
时间现在
以上所述就是小编给大家介绍的《HTML5常用标签(2-5)绘图及时间标签》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。