Table of Contents
サンプルコード
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<svg width="200" height="100" viewBox="0 0 200 100">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="blue"></ellipse>
</svg>
<svg width="200" height="100" viewBox="0 0 200 100">
<rect x="0" y="0" width="200" height="100" rx="0" ry="0" fill="yellow"></rect>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
<polygon points="50,0 100,50 75,100 25,100 0,50" fill="green"></polygon>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
<line x1="0" y1="50" x2="100" y2="50" stroke="#000"></line>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
<polyline points="0,25 50,25 50,75 100,75" stroke="#000" fill="none"></polyline>
</svg>
</body>
</html>
円
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
| プロパティ | 説明 |
| cx | 円の中心のX座標 |
| cy | 円の中心のY座標 |
| r | 円の半径 |
| fill | 円の塗りつぶし色 |
楕円
<svg width="200" height="100" viewBox="0 0 200 100">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="blue"></ellipse>
</svg>
四角形
<svg width="200" height="100" viewBox="0 0 200 100">
<rect x="0" y="0" width="200" height="100" rx="0" ry="0" fill="yellow"></rect>
</svg>
多角形
<svg width="100" height="100" viewBox="0 0 100 100">
<polygon points="50,0 100,50 75,100 25,100 0,50" fill="green"></polygon>
</svg>
直線
<svg width="100" height="100" viewBox="0 0 100 100">
<line x1="0" y1="50" x2="100" y2="50" stroke="#000"></line>
</svg>
折れ線
<svg width="100" height="100" viewBox="0 0 100 100">
<polyline points="0,25 50,25 50,75 100,75" stroke="#000" fill="none"></polyline>
</svg>
