<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--<title></title>-->
</head>
<body>
<!--HTML5中SVG的作用--用于伸缩的矢量图形-->
<!--使SVG绘制图形就是说创建一个<svg>标签-->
<!--<svg width="1000" height="1000">-->
<!--创建一个圆形，需要添加一个<circle>标签-->
<!--<circle cx="300" cy="150" r="140" fill="red"/>-->
<!--</svg>-->
<!--cx和cy属性定义圆点的x和y的坐标，如果省略cx和cy，圆的中心会被设置为（0，0），r属性定义为圆的半径-->
<!--SVG其他形状元素-->
<!--<rect>标签是用来创建矩形，以及矩形的变种-->
<!--<svg width="1000" height="1000">-->
<!--<rect width="400" height="200" x="20" y="20" fill="red"/>-->
<!--</svg>-->
<!--<line>标签用来创建直线-->
<!--<svg width="500" height="510">-->
<!--<line x1="20" y1="20" x2="300" y2="200" style="stroke:#000;stroke-linecap:round; stroke-width:20"/>-->
<!--</svg>-->
<!--<polyline>标签是用来创建任何只有直线的形状-->
<!--<svg width="2000" height="500">-->
<!--<polyline style="stroke-linejion:miter;stroke:black;stroke-width:12;fill: none;"points="100 100,150 150,200 100"/>-->
<!--</svg>-->
<!--<ellipse>标签用来创建椭圆，椭圆与圆形的区别是椭圆有不同的x和y半径，圆有x和半径是相同的-->
<!--<svg width="500" height="250">-->
<!--<ellipse cx="200" cy="100" rx="150" ry="70" style="fill: red"></ellipse>-->
<!--</svg>-->
<!--<polygon>标签创建含有不少于三边的图形-->
<svg width="1000" height="1000">
<polygon points="100 100,200 200, 300 0"></polygon>
</svg>
</body>
</html>