HTML5 – SVG 线条
下面是一个 SVG 示例的 HTML5 版本，用 <line> 标签绘制一个线条：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
你可以使用 style 属性给它设置额外的样式信息，比如笔画，填充色，笔画宽度等等。
在启用 HTML5 的最新版 FireFox 中会生成如下结果：
HTML5 – SVG 椭圆
下面是一个 SVG 示例的 HTML5 版本，用 <ellipse> 标签绘制一个椭圆：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>
在启用 HTML5 的最新版 FireFox 中会生成如下结果：
HTML5 – SVG 多边形
下面是一个 SVG 示例的 HTML5 版本，用 <polygon> 标签绘制一个多边形：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
