Web Chart 入門（2）：SVG、VML、HTML5 Canvas 簡單繪圖實例

VML 示例（IE 專用）

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head><title>VML Example</title></head>
<body>
  <v:line from="20,20" to="200,200"></v:line>
</body>
</html>

關鍵：xmlns:v="urn:schemas-microsoft-com:vml" 聲明命名空間。
學習資源：MSDN VML、中文入門、在線編輯器。

SVG 示例

方式一：內聯 SVG（現代瀏覽器支持）

<html xmlns="https://www.w3.org/1999/xhtml" xmlns:svg="https://www.w3.org/2000/svg">
<body>
  <svg width="100%" height="100%" version="1.1" xmlns="https://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2" />
  </svg>
</body>
</html>

方式二：外部 .svg 文件嵌入

創建 line.svg：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="https://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2" />
</svg>

三種嵌入標簽：

• <embed src="line.svg" type="image/svg+xml" pluginspage="..."/>
（支持腳本，非標準 XHTML）
• <object data="line.svg" type="image/svg+xml" codebase="..."/>
（標準，不支持腳本）
• <iframe src="line.svg"></iframe>
（隔離上下文）

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.stroke();
</script>