|
0
|
1 |
<?xml version="1.0"?>
|
|
|
2 |
<svg width="5cm" height="4cm" viewBox="0 0 500 400"
|
|
|
3 |
xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
|
|
|
4 |
<title>Example cubic01- cubic Bézier commands in path data</title>
|
|
|
5 |
<desc>Picture showing a simple example of path data
|
|
|
6 |
using both a "C" and an "S" command,
|
|
|
7 |
along with annotations showing the control points
|
|
|
8 |
and end points</desc>
|
|
|
9 |
<rect fill="none" stroke="blue" stroke-width="1" x="1" y="1" width="498" height="398" />
|
|
|
10 |
<polyline fill="none" stroke="#888888" stroke-width="1" points="100,200 100,100" />
|
|
|
11 |
<polyline fill="none" stroke="#888888" stroke-width="1" points="250,100 250,200" />
|
|
|
12 |
<polyline fill="none" stroke="#888888" stroke-width="1" points="250,200 250,300" />
|
|
|
13 |
<polyline fill="none" stroke="#888888" stroke-width="1" points="400,300 400,200" />
|
|
|
14 |
<path fill="none" stroke="red" stroke-width="5" d="M100,200 C100,100 250,100 250,200
|
|
|
15 |
S400,300 400,200" />
|
|
|
16 |
<circle fill="#888888" stroke="none" stroke-width="2" cx="100" cy="200" r="10" />
|
|
|
17 |
<circle fill="#888888" stroke="none" stroke-width="2" cx="250" cy="200" r="10" />
|
|
|
18 |
<circle fill="#888888" stroke="none" stroke-width="2" cx="400" cy="200" r="10" />
|
|
|
19 |
<circle fill="#888888" stroke="none" cx="100" cy="100" r="10" />
|
|
|
20 |
<circle fill="#888888" stroke="none" cx="250" cy="100" r="10" />
|
|
|
21 |
<circle fill="#888888" stroke="none" cx="400" cy="300" r="10" />
|
|
|
22 |
<circle fill="none" stroke="blue" stroke-width="4" cx="250" cy="300" r="9" />
|
|
|
23 |
<text font-size="22" font-family="Verdana" x="25" y="70">M100,200 C100,100 250,100 250,200</text>
|
|
|
24 |
<text font-size="22" font-family="Verdana" x="325" y="350"
|
|
|
25 |
text-anchor="middle">S400,300 400,200</text>
|
|
|
26 |
</svg>
|
