会员登录 | 会员注册 | 意见建议 | 网站地图

站长资源综合门户

当前位置:首页 > 站长学院 > 建站经验 > 如何在HTML5中使用SVG

如何在HTML5中使用SVG

时间:2012-07-31 19:32:07   作者:   来源:   点击:

代码4:SVG画椭圆

<!DOCTYPE html>
<head>
<title>Mrbool - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="
.w3.org/2000/svg">
    <ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>   
</svg>
</body>
</html>

 

 

SVG多边形:

我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点,用左边对来定义,形如 points="10,10 75,150 150,60" ,这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样,用 style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。

代码5:SVG画多边形

<!DOCTYPE html>
<head>
<title>Mrbool - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="
.w3.org/2000/svg">
    <polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>
</body>
</html>

 

分享到:

网友评论

热门建站经验