|
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> |
