0

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

Anya Kononchenko
  • 1
  • Note that you are not asking how to split curves, you're asking how to split an SVG _path string_. You just need an `M` instruction in front of your `C` for your path to now be two independent subpaths. – Mike 'Pomax' Kamermans Apr 19 '21 at 14:51

1 Answers1

1

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Remember that code answers need to include the code in the post itself, even if there's a live demo URL to link out to. Codepen can die overnight, which would unintentionally also make this answer entirely useless for future visitors =) – Mike 'Pomax' Kamermans Apr 19 '21 at 14:53