今天練習了多個SVG繪製圖形模型
截圖：
代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5-SVG練習</title>
<script type="text/javascript">
//SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
//SVG 用於定義用於網絡的基於矢量的圖形
//SVG 使用 XML 格式定義圖形
//SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
//SVG 是萬維網聯盟的標準
//與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
//SVG 圖像可通過文本編輯器來創建和修改
//SVG 圖像可被搜索、索引、腳本化或壓縮
//SVG 是可伸縮的
//SVG 圖像可在任何的分辨率下被高質量地打印
//SVG 可在圖像質量不下降的情況下被放大
//SVG 與 Canvas兩者間的區別
//SVG 是一種使用 XML 描述 2D 圖形的語言。
//Canvas 通過 JavaScript 來繪製 2D 圖形。
//SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。
//在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
//Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。
//如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
</script>
<style type="text/css">
</style>
</head>
<body>
<!--三角形,折線 - polyline元素,points 點的座標，x和y軸座標定位1個點
style：樣式；fill填充顏色，stroke線條顏色，stroke-width：線條寬度或者粗細值
-->
<svg width="250" height="250">
<polygon points="100 10,100 100,150 100"
style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;">
</svg>
<!--五角星,折線 - polyline元素-->
<svg width="250" height="250">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<!--矩形 - rect元素,x：矩形左上角的座標(用戶座標系)的x值。
y：矩形左上角的座標(用戶座標系)的y值。
width：矩形寬度。height：矩形高度。
rx：實現圓角效果時，圓角沿x軸的半徑。
ry：實現圓角效果時，圓角沿y軸的半徑-->
<svg width="250" height="250">
<rect x="10" y="10" rx="20" ry="20" width="150" height="150"
style="fill:transparent;stroke:green;stroke-width:5"/>
</svg>
<!--圓 - circle元素;r：圓的半徑。cx：圓心座標x值。cy：圓心座標y值。-->
<svg width="250" height="250">
<circle cx="75" cy="75" r="70" stroke="red"
fill="transparent" stroke-width="5" />
</svg>
<!--橢圓 - ellipse元素;rx：半長軸(x半徑)。ry：半短軸(y半徑)。
cx：圓心座標x值。cy：圓心座標y值。-->
<svg width="250" height="250">
<ellipse cx="100" cy="100" rx="70" ry="50" stroke="red"
fill="transparent" stroke-width="5" />
</svg>
<!--直線 - line元素;x1：起點x座標。y1：起點y座標。
x2：終點x座標。y2：終點y座標。-->
<svg width="250" height="250">
<line x1="10" y1="110" x2="150" y2="150" stroke="red"
fill="transparent" stroke-width="5" />
</svg>
<!--折線 - polyline元素;points：一系列的用空格，逗號，換行符等分隔開的點。
每個點必須有2個數字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)
可以寫成："0 0, 1 1, 2 2"。-->
<svg width="250" height="250">
<polyline points="10 240, 60 60, 100 180, 150 200" stroke="orange"
fill="transparent" stroke-width="5" />
</svg>
<!--路徑 - path元素:這個是最通用，最強力的元素了；使用這個元素你可以實現任何其他的圖形，
不僅包括上面這些基本形狀，也可以實現像貝塞爾曲線那樣的複雜形狀；
此外，使用path可以實現平滑的過渡線段，雖然也可以使用polyline來實現這種效果，
但是需要提供的點很多，而且放大了效果也不好。這個元素控制位置和形狀的只有一個參數：
d：一系列繪製指令和繪製參數(點)組合成。-->
<svg width="250" height="250">
<path d="M20,230 Q40,205 50,230 T90,230"
fill="none" stroke="blue" stroke-width="5" />
<!--繪製圓弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx,ry 是弧的 【半長軸、半短軸】 長度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角，即x軸的逆時針旋轉角度，負數代表順時針轉動的角度。
large-arc-flag 爲1 表示大角度弧線，0 代表小角度弧線。
sweep-flag 爲1代表從起點到終點弧線繞中心順時針方向，0 代表逆時針方向。
x,y 是弧終端座標。
移動畫筆指令M：將畫筆移動到點(x,y)
畫直線指令 L：畫筆從當前的點繪製線段到點(x,y)
閉合指令Z：繪製閉合圖形，如果d屬性不指定Z命令，則繪製線段，而不是封閉圖形。
-->
<path d="M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
</svg>
<!--60度圓弧 -->
<svg width="250" height="250">
<path d="M100 100
A 100 100, 0, 0, 0, 150 186.6
L 200 100 Z"
fill="none" stroke="blue" stroke-width="5" />
</svg>
</body>
</html>