<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="10cm" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
<title>Example cubic02 - cubic Bezier commands in path data</title>
<desc>Picture showing examples of "C" and "S" commands,
along with annotations showing the control points
and end points</desc>
<rect fill="none" stroke="blue" stroke-width="1" x="1" y="1" width="998" height="998" />
<!-- Path 1 -->
<polyline fill="none" stroke="#888888" stroke-width="2" points="100,200 100,100" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="400,100 400,200" />
<path fill="none" stroke="red" stroke-width="5" d="M100,200 C100,100 400,100 400,200" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="200" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="200" r="10" />
<circle class="CtlPoint" cx="100" cy="100" r="10" />
<circle class="CtlPoint" cx="400" cy="100" r="10" />
<text text-anchor="middle" font-size="22" font-family="Verdana" x="250" y="275">M100,200 C100,100 400,100 400,200</text>
<!-- Path 2 -->
<polyline fill="none" stroke="#888888" stroke-width="2" points="100,500 25,400" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="475,400 400,500" />
<path fill="none" stroke="red" stroke-width="5" d="M100,500 C25,400 475,400 400,500" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="500" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="500" r="10" />
<circle fill="#888888" stroke="none" cx="25" cy="400" r="10" />
<circle fill="#888888" stroke="none" cx="475" cy="400" r="10" />
<text text-anchor="middle" font-size="22" font-family="Verdana" x="250" y="575">M100,500 C25,400 475,400 400,500</text>
<!-- Path 3 -->
<polyline fill="none" stroke="#888888" stroke-width="2" points="100,800 175,700" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="325,700 400,800" />
<path fill="none" stroke="red" stroke-width="5" d="M100,800 C175,700 325,700 400,800" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="100" cy="800" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="400" cy="800" r="10" />
<circle fill="#888888" stroke="none" cx="175" cy="700" r="10" />
<circle fill="#888888" stroke="none" cx="325" cy="700" r="10" />
<text text-anchor="middle" font-size="22" font-family="Verdana" x="250" y="875">M100,800 C175,700 325,700 400,800</text>
<!-- Path 4 -->
<polyline fill="none" stroke="#888888" stroke-width="2" points="600,200 675,100" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="975,100 900,200" />
<path fill="none" stroke="red" stroke-width="5" d="M600,200 C675,100 975,100 900,200" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="600" cy="200" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="900" cy="200" r="10" />
<circle fill="#888888" stroke="none" cx="675" cy="100" r="10" />
<circle fill="#888888" stroke="none" cx="975" cy="100" r="10" />
<text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="275">M600,200 C675,100 975,100 900,200</text>
<!-- Path 5 -->
<polyline fill="none" stroke="#888888" stroke-width="2" points="600,500 600,350" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="900,650 900,500" />
<path fill="none" stroke="red" stroke-width="5" d="M600,500 C600,350 900,650 900,500" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="600" cy="500" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="900" cy="500" r="10" />
<circle fill="#888888" stroke="none" cx="600" cy="350" r="10" />
<circle fill="#888888" stroke="none" cx="900" cy="650" r="10" />
<text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="575">M600,500 C600,350 900,650 900,500</text>
<!-- Path 6 (C and S command) -->
<polyline fill="none" stroke="#888888" stroke-width="2" points="600,800 625,700" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="725,700 750,800" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="750,800 775,900" />
<polyline fill="none" stroke="#888888" stroke-width="2" points="875,900 900,800" />
<path fill="none" stroke="red" stroke-width="5" d="M600,800 C625,700 725,700 750,800
S875,900 900,800" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="600" cy="800" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="750" cy="800" r="10" />
<circle fill="none" stroke="#888888" stroke-width="2" cx="900" cy="800" r="10" />
<circle fill="#888888" stroke="none" cx="625" cy="700" r="10" />
<circle fill="#888888" stroke="none" cx="725" cy="700" r="10" />
<circle fill="#888888" stroke="none" cx="875" cy="900" r="10" />
<circle fill="none" stroke="blue" stroke-width="4" cx="775" cy="900" r="9" />
<text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="945">M600,800 C625,700 725,700 750,800</text>
<text text-anchor="middle" font-size="22" font-family="Verdana" x="750" y="975">S875,900 900,800</text>
</svg>
© 2008-2011 Nokia Corporation and/or its subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation in Finland and/or other countries worldwide.
All other trademarks are property of their respective owners. Privacy Policy
Licensees holding valid Qt Commercial licenses may use this document in accordance with the Qt Commercial License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Nokia.
Alternatively, this document may be used under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation.