You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.5 KiB
HTML
83 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Use svg</title>
|
|
<link rel="stylesheet" href="./pieChart.css" />
|
|
</head>
|
|
<body>
|
|
<svg viewBox="-1 -1 2 2" style="transform: rotate(-90deg)"></svg>
|
|
<script src="pieChart.js"></script>
|
|
|
|
<br />
|
|
<!-- curves sample -->
|
|
<!-- C x1 y1, x2 y2, x y -->
|
|
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M 10 10 C 20 20, 40 20, 50 10"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 70 10 C 70 20, 110 20, 110 10"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 130 10 C 120 20, 180 20, 170 10"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 10 60 C 20 80, 40 80, 50 60"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 70 60 C 70 80, 110 80, 110 60"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 130 60 C 120 80, 180 80, 170 60"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 10 110 C 20 140, 40 140, 50 110"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 70 110 C 70 140, 110 140, 110 110"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
<path
|
|
d="M 130 110 C 120 140, 180 140, 170 110"
|
|
stroke="black"
|
|
fill="transparent"
|
|
/>
|
|
</svg>
|
|
|
|
<br />
|
|
<!-- Sample Arc -->
|
|
<!-- A rx ry x-axis-rotation large-arc-flag sweep-flag x y -->
|
|
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M 10 315
|
|
L 110 215
|
|
A 30 50 0 0 1 162.55 162.45
|
|
L 172.55 152.45
|
|
A 30 50 -45 0 1 215.1 109.9
|
|
L 315 10"
|
|
stroke="black"
|
|
fill="green"
|
|
stroke-width="2"
|
|
fill-opacity="0.5"
|
|
/>
|
|
</svg>
|
|
</body>
|
|
</html>
|