html輕鬆畫出各種圖形，附帶解釋

<svg width="100" height="100">
<rect x="20" y="20"  width="50" height="40" style="fill:blue;stroke:pink;stroke-width:7;opacity:0.7;"></rect>
</svg>
<code></code>
<svg width="100" height="100">
<rect x="20" y="20"  rx="10" ry="10" width="50" height="40" style="fill:blue;stroke:pink;stroke-width:7;opacity:0.7;"></rect>
</svg>
<ul>
<li>x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
<li>y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
<li>rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
<li>style 屬性用來定義 CSS 屬性
<li>CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
<li>CSS 的 stroke-width 屬性定義矩形邊框的寬度
<li>CSS 的 stroke 屬性定義矩形邊框的顏色
<li>rx 和 ry 屬性可使矩形產生圓角。
</ul>

<svg width="100" height="100">
<circle cx="100" cy="50" r="40" style="fill:blue;stroke:pink;stroke-width:7;opacity:0.7;"></circle>
</svg>
<svg width="200" height="100">
<circle cx="100" cy="50" r="40" style="fill:blue;stroke:pink;stroke-width:7;opacity:0.7;"></circle>
</svg>
<ul>
<li>cx 和 cy 屬性定義圓點的 x 和 y 座標;如果省略 cx 和 cy，圓的中心會被設置爲 (0, 0)
</ul>

<svg width="200" height="100">
<ellipse cx="100" cy="40" rx="50" ry="20" style="fill:blue;stroke:pink;stroke-width:7;opacity:0.7;"></ellipse>
</svg>
<svg width="500" height="100">
<ellipse cx="180" cy="65" rx="170" ry="20"
style="fill:purple"/>

<ellipse cx="160" cy="50" rx="150" ry="10"
style="fill:lime"/>

<ellipse cx="140" cy="30" rx="130" ry="15"
style="fill:yellow"/>
</svg>
<ul>
<li>cx 屬性定義圓點的 x 座標
<li>cy 屬性定義圓點的 y 座標
<li>rx 屬性定義水平半徑
<li>ry 屬性定義垂直半徑
</ul>
<svg width="200" height="100">
<line x1="0" y1="0" x2="100" y2="50" style="stroke:black;stroke-width:2;opacity:0.7;"></line>
</svg>
<svg width="200" height="100">
<rect x="0" y="0"  width="100" height="50" style="fill:pink;stroke:black;stroke-width:1;"></rect>
<line x1="0" y1="0" x2="100" y2="50" style="stroke:black;stroke-width:1;"></line>
</svg>
<ul>
<li>x1 屬性在 x 軸定義線條的開始
<li>y1 屬性在 y 軸定義線條的開始
<li>x2 屬性在 x 軸定義線條的結束
<li>y2 屬性在 y 軸定義線條的結束
</ul>
<svg width="700" height="100" >
<polygon points="0,0 0,100 120,100" style="fill:blue; stroke:pink;stroke-width:5"/>
<polygon points="300,0 400,50 300,100" style="fill:blue; stroke:pink;stroke-width:5"/>
<polygon points="150,0 200,0 250,50 200,100 150,100 100,50" style="fill:blue; stroke:pink;stroke-width:5"/>
</svg>
<ul>
<li>points 屬性定義多邊形每個角的 x 和 y 座標
</ul>
<svg width="200" height="100" >
<polyline points="50,0 50,50 100,50 100,100 150,100 150,150  " style="fill:white; stroke:pink;stroke-width:2"><polyline>
</svg>
<svg width="300" height="150" >
<polyline points="175,0 150,50 100,50 125,100 100,150 175,125 250,150 225,100 250,50 200,50 175,0  " style="fill:blue; stroke:pink;stroke-width:2;"><polyline>
</svg>