<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<h1>line直线,g是group的缩写可以统一一组的属性，其本身不可见</h1>
<svg id="s9" width="500" height="400">
<g stroke="#000" stroke-width="50" stroke-linecap="round">
<line x1="50" y1="50" x2="50" y2="50" ></line>
<line x1="120" y1="50" x2="220" y2="50" ></line>
<line x1="50" y1="120" x2="50" y2="120"></line>
<line x1="120" y1="120" x2="220" y2="120"></line>
</g>
<h1>折线:添加points点，用透明transparent填充，描边用黑色</h1>
<svg id="s10" width="500" height="400">
<polyline points="50,50 100,300 150,100" fill="transparent" stroke="#000"></polyline>
</svg>
<h1>polyline实现五角星</h1>
<svg id="s11" width="500" height="400">
<polyline points="0,50 150,50 10,150 75,0 140,150 0,50" fill="transparent" stroke="#000"></polyline>
</svg>
<h1>实现多边形:至少3个点</h1>
<svg id="s12" width="500" height="400">
<polygon points="50,50 150,300 10,40" ></polygon>
</svg>
<h1>polygon实现小房子图标</h1>
<svg id="s13" width="500" height="400">
<polygon points="0,50 50,0 100,50 85,50 85,100 60,100 60,65 40,65 40,100 15,100 15,50 " ></polygon>
</svg>
</svg>
<script></script>
</body>
</html>
<h1>绘制文本:svg画布上不允许使用普通的HTML元素，eg:span,div.需要用svg自己的text</h1>
<svg id="s14" width="500" height="400">
<text font-size="50" alignment-baseline="before-edge" fill="transparent" stroke="#0f0">SVG 画布中的文本，用SVG的text元素</text>
</svg>
</svg>
<h1>SVG上放图像,用SVG的元素：image,必须指定其宽高,x,y不是必须的用于调整图片在画布中的位置</h1>
<svg id="s15" width="800" height="800">
<image xlink:href="image/1.jpg" width="200" height="300" x="10" y="10"></image>
<img src="image/1.jpg">
</svg>
