CODEWITHSUNDEEP
svgbeziercubic-bezier
Anya Kononchenko
Anya Kononchenko

Reputation: 1

How to get start point of segment of polybezier curve?

I have such curve as d="m 8.6934523,43.845239 c 0,0 -3.0238096,-6.236608 -3.2127975,-11.90625 C 5.2916666,26.269345 6.047619,17.197916 10.961309,13.418155 15.875,9.6383926 20.032738,8.315476 28.537201,9.0714284"

And it is needed to split the curve in the place, where the segment with absolute coordinates starts ("C 5.2916666,26.26.9345 ...."). I have to represent that segment as another curve in the view "m x,y C 5.2916666,26.26.9345 .... ". Solution as "m 0,0 C 5.2916666,26.26.9345 .... " is not suitable in this case :( And a start point as the last control point of the previous segment is not working (I believe it's because of switching to absolute coordinates).

Should I somehow calculate the start point from the previous segment? Or is there corresponding literature (in the documentation there is no data, except that such curves called polybezier)?

Upvotes: 0

Views: 198

Answers (1)

enxaneta
enxaneta

Reputation: 33044

first you will need to change the d attribute to all absolute coordinates (all uppercase). For this I'm using this converter: https://codepen.io/leaverou/pen/RmwzKv

Next, in order to split it by the point you need you need to use the last 2 values from the previous command for the move to command of the new curve

svg{width:45vw}
<svg viewBox="5 8 24 35">
<path d="M8.6934523,43.845239C8.6934523,43.845239,5.669642700000001,37.608631,5.4806548,31.938989
C5.2916666,26.269345,6.047619,17.197916,10.961309,13.418155C15.875,9.6383926,20.032738,8.315476,28.537201,9.0714284"/>
</svg>




<svg viewBox="5 8 24 35">
<path d="M8.6934523,43.845239C8.6934523,43.845239,5.669642700000001,37.608631,5.4806548,31.938989"/>
<path fill="red" d="M5.4806548,31.938989C5.2916666,26.269345,6.047619,17.197916,10.961309,13.418155C15.875,9.6383926,20.032738,8.315476,28.537201,9.0714284"/>
</svg>

Upvotes: 1

Related Questions