通过svg 画出的矩形 圆形 叠加的椭圆 直线 折现 多边形 还有五角星 各种例子以及图案，还有代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--矩形 -- >（rect）
<svg <!--viewBox="0 0 100 100"-->>
<rect width="100" height="100" fill="red" stroke="blue" stroke-width="10" stroke-opacity="0.9" x="10" y="10" rx="10" ></rect>
</svg>
<!--圆形-- > （scrcle）
<svg>
<scrcle cx="100" cy="70" r="60" fill="red"></scrcle>
</svg>
椭圆 （ellipse）
<svg>
<ellipse cx="100" cy="70" rx="60" ry="70"></ellipse>
</svg>
<!--叠加的椭圆-->
<svg>
<ellipse cx="100" cy="70" rx="70" ry="50" fill="skyblue"></ellipse>
<ellipse cx="100" cy="60" rx="60" ry="40" fill="blue"></ellipse>
<ellipse cx="100" cy="50" rx="50" ry="30" fill="green"></ellipse>
</svg>
<!--直线-->
<svg>
<line x1 ="50" x2="50 " y1="100" y2="100" fill="red" stroke="red" stroke-width="1" stroke-linecap="round" > </line>
</svg>
<!--折现 -->（polyline）
<svg> 在这polyling 和polygon 的区别是 polyling是折现不封闭缺口画完图型以后不再回到起点 ，而polygon封闭缺口，画完图型以后再回到起点 ，请看下面的图形
<polyline points="50,50 100, 100 170,50" stroke-width="2" stroke="blue" fill="red"></polyline>
</svg>
<!--多边形 -->
<svg>
<polygon points="50,50 100, 100 170,50" stroke-width="2" stroke="blue" fill="white"></polygon >
</svg>
<!--五角星 -->
<svg>
<polygon points="15,100 95, 100 30,150 55,70 80,150" stroke-width="2" stroke="blue" fill="red" fill-rule="evenodd"></polygon >
</svg>
</body>
</html>