通過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>