350 lines
7.2 KiB
XML
350 lines
7.2 KiB
XML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
<svg
|
|
width="10cm"
|
|
height="10cm"
|
|
viewBox="0 0 1000 1000"
|
|
version="1.1"
|
|
id="svg31"
|
|
sodipodi:docname="cubic_bezier2.svg"
|
|
inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
|
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg"
|
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
xmlns:cc="http://creativecommons.org/ns#"
|
|
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
|
<defs
|
|
id="defs31" />
|
|
<sodipodi:namedview
|
|
id="namedview31"
|
|
pagecolor="#505050"
|
|
bordercolor="#ffffff"
|
|
borderopacity="1"
|
|
inkscape:showpageshadow="0"
|
|
inkscape:pageopacity="0"
|
|
inkscape:pagecheckerboard="1"
|
|
inkscape:deskcolor="#505050"
|
|
inkscape:document-units="cm"
|
|
inkscape:zoom="2.3045208"
|
|
inkscape:cx="188.97638"
|
|
inkscape:cy="188.97638"
|
|
inkscape:current-layer="svg31" />
|
|
<title
|
|
id="title1">Example cubic02 - cubic Bézier commands in path data</title>
|
|
<desc
|
|
id="desc1">Picture showing examples of "C" and "S" commands,
|
|
along with annotations showing the control points
|
|
and end points</desc>
|
|
<style
|
|
type="text/css"
|
|
id="style1"><![CDATA[
|
|
.Border { fill:none; stroke:blue; stroke-width:1 }
|
|
.Connect { fill:none; stroke:#888888; stroke-width:2 }
|
|
.SamplePath { fill:none; stroke:red; stroke-width:5 }
|
|
.EndPoint { fill:none; stroke:#888888; stroke-width:2 }
|
|
.CtlPoint { fill:#888888; stroke:none }
|
|
.AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
|
|
.Label { text-anchor:middle; font-size:22; font-family:Verdana }
|
|
]]></style>
|
|
<rect
|
|
class="Border"
|
|
x="1"
|
|
y="1"
|
|
width="998"
|
|
height="998"
|
|
id="rect1" />
|
|
<!-- Path 1 -->
|
|
<polyline
|
|
class="Connect"
|
|
points="100,200 100,100"
|
|
id="polyline1" />
|
|
<polyline
|
|
class="Connect"
|
|
points="400,100 400,200"
|
|
id="polyline2" />
|
|
<path
|
|
class="SamplePath"
|
|
d="M100,200 C100,100 400,100 400,200"
|
|
id="path2" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="100"
|
|
cy="200"
|
|
r="10"
|
|
id="circle2" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="400"
|
|
cy="200"
|
|
r="10"
|
|
id="circle3" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="100"
|
|
cy="100"
|
|
r="10"
|
|
id="circle4" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="400"
|
|
cy="100"
|
|
r="10"
|
|
id="circle5" />
|
|
<text
|
|
class="Label"
|
|
x="250"
|
|
y="275"
|
|
id="text5">M100,200 C100,100 400,100 400,200</text>
|
|
<!-- Path 2 -->
|
|
<polyline
|
|
class="Connect"
|
|
points="100,500 25,400"
|
|
id="polyline5" />
|
|
<polyline
|
|
class="Connect"
|
|
points="475,400 400,500"
|
|
id="polyline6" />
|
|
<path
|
|
class="SamplePath"
|
|
d="M100,500 C25,400 475,400 400,500"
|
|
id="path6" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="100"
|
|
cy="500"
|
|
r="10"
|
|
id="circle6" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="400"
|
|
cy="500"
|
|
r="10"
|
|
id="circle7" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="25"
|
|
cy="400"
|
|
r="10"
|
|
id="circle8" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="475"
|
|
cy="400"
|
|
r="10"
|
|
id="circle9" />
|
|
<text
|
|
class="Label"
|
|
x="250"
|
|
y="575"
|
|
id="text9">M100,500 C25,400 475,400 400,500</text>
|
|
<!-- Path 3 -->
|
|
<polyline
|
|
class="Connect"
|
|
points="100,800 175,700"
|
|
id="polyline9" />
|
|
<polyline
|
|
class="Connect"
|
|
points="325,700 400,800"
|
|
id="polyline10" />
|
|
<path
|
|
class="SamplePath"
|
|
d="M100,800 C175,700 325,700 400,800"
|
|
id="path10" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="100"
|
|
cy="800"
|
|
r="10"
|
|
id="circle10" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="400"
|
|
cy="800"
|
|
r="10"
|
|
id="circle11" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="175"
|
|
cy="700"
|
|
r="10"
|
|
id="circle12" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="325"
|
|
cy="700"
|
|
r="10"
|
|
id="circle13" />
|
|
<text
|
|
class="Label"
|
|
x="250"
|
|
y="875"
|
|
id="text13">M100,800 C175,700 325,700 400,800</text>
|
|
<!-- Path 4 -->
|
|
<polyline
|
|
class="Connect"
|
|
points="600,200 675,100"
|
|
id="polyline13" />
|
|
<polyline
|
|
class="Connect"
|
|
points="975,100 900,200"
|
|
id="polyline14" />
|
|
<path
|
|
class="SamplePath"
|
|
d="M600,200 C675,100 975,100 900,200"
|
|
id="path14" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="600"
|
|
cy="200"
|
|
r="10"
|
|
id="circle14" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="900"
|
|
cy="200"
|
|
r="10"
|
|
id="circle15" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="675"
|
|
cy="100"
|
|
r="10"
|
|
id="circle16" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="975"
|
|
cy="100"
|
|
r="10"
|
|
id="circle17" />
|
|
<text
|
|
class="Label"
|
|
x="750"
|
|
y="275"
|
|
id="text17">M600,200 C675,100 975,100 900,200</text>
|
|
<!-- Path 5 -->
|
|
<polyline
|
|
class="Connect"
|
|
points="600,500 600,350"
|
|
id="polyline17" />
|
|
<polyline
|
|
class="Connect"
|
|
points="900,650 900,500"
|
|
id="polyline18" />
|
|
<path
|
|
class="SamplePath"
|
|
d="M600,500 C600,350 900,650 900,500"
|
|
id="path18" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="600"
|
|
cy="500"
|
|
r="10"
|
|
id="circle18" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="900"
|
|
cy="500"
|
|
r="10"
|
|
id="circle19" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="600"
|
|
cy="350"
|
|
r="10"
|
|
id="circle20" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="900"
|
|
cy="650"
|
|
r="10"
|
|
id="circle21" />
|
|
<text
|
|
class="Label"
|
|
x="750"
|
|
y="575"
|
|
id="text21">M600,500 C600,350 900,650 900,500</text>
|
|
<!-- Path 6 (C and S command) -->
|
|
<polyline
|
|
class="Connect"
|
|
points="600,800 625,700"
|
|
id="polyline21" />
|
|
<polyline
|
|
class="Connect"
|
|
points="725,700 750,800"
|
|
id="polyline22" />
|
|
<polyline
|
|
class="Connect"
|
|
points="750,800 775,900"
|
|
id="polyline23" />
|
|
<polyline
|
|
class="Connect"
|
|
points="875,900 900,800"
|
|
id="polyline24" />
|
|
<path
|
|
class="SamplePath"
|
|
d="M600,800 C625,700 725,700 750,800 S875,900 900,800"
|
|
id="path24" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="600"
|
|
cy="800"
|
|
r="10"
|
|
id="circle24" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="750"
|
|
cy="800"
|
|
r="10"
|
|
id="circle25" />
|
|
<circle
|
|
class="EndPoint"
|
|
cx="900"
|
|
cy="800"
|
|
r="10"
|
|
id="circle26" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="625"
|
|
cy="700"
|
|
r="10"
|
|
id="circle27" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="725"
|
|
cy="700"
|
|
r="10"
|
|
id="circle28" />
|
|
<circle
|
|
class="CtlPoint"
|
|
cx="875"
|
|
cy="900"
|
|
r="10"
|
|
id="circle29" />
|
|
<circle
|
|
class="AutoCtlPoint"
|
|
cx="775"
|
|
cy="900"
|
|
r="9"
|
|
id="circle30" />
|
|
<text
|
|
class="Label"
|
|
x="750"
|
|
y="945"
|
|
id="text30">M600,800 C625,700 725,700 750,800</text>
|
|
<text
|
|
class="Label"
|
|
x="750"
|
|
y="975"
|
|
id="text31">S875,900 900,800</text>
|
|
<metadata
|
|
id="metadata31">
|
|
<rdf:RDF>
|
|
<cc:Work
|
|
rdf:about="">
|
|
<dc:title>Example cubic02 - cubic Bézier commands in path data</dc:title>
|
|
</cc:Work>
|
|
</rdf:RDF>
|
|
</metadata>
|
|
</svg>
|