<!DOCTYPE html>
<html>
<head>
<style>
.div1{width:100%height:800pxposition: absolutez-index: 9left:0top:0background:red}
.div2{width:100%height:400pxposition: absolutez-index: 99left:0top:0background:yellowopacity:0.4}
</style>
</head>
<body>
<div class="div1"></div>胡春
<div class="div2"></div>
</body>
</明册html>
<html>销桥猜<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=windows-31j">
<title>消薯Insert title here</title>
<script type="text/javascript">
function load() {
var embedTag = document.createElement('embed')
embedTag.type = "image/svg+xml"
embedTag.width = "640"
embedTag.height = "480"亏型
embedTag.onload = function() {
alert(embedTag.getSVGDocument())
}
embedTag.src = "test.svg"
document.body.appendChild(embedTag)
}
</script>
</head>
<body onload="load()">
</body>
</html>
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。SVG标签跟其它的HTML标签有通用的属性。将SVG元素加入到HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。
代码1：使用SVG画线
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</滚租h2>
<svg id="svgLineTutorial" style="border-style:solidborder-width:2px" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0)stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Greenstroke-width:2"/>
</svg>
</body>
</html>
SVG画圆：
SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周升敬线条颜色和宽度。
代码2:使用SVG画圆
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
</body>
</html>
SVG矩形:
同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用 fills 属性定义填充颜色。用 strock 定义边框大笑兆。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。
代码3:SVG画矩形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
</body>
</html>
SVG椭圆：
同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208stroke:blackstroke-width:3"。
代码4:SVG画椭圆
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208stroke:blackstroke-width:3"/>
</svg>
</body>
</html>
SVG多边形：
使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60" ，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用 style="fill:#63BCF7stroke:blackstroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
代码5：SVG画多边形
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7stroke:blackstroke-width:3"/>
</svg>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）