5

I need a way to mark the starting node in a curve. I am using the curves in an external program that animates the drawing of the object from the starting point to the end.

It appears that cutting a path at a point will move the start to that position, but combining it again will move it somewhere else.

How can I set the start point for a curve?

4

A curve can't have a starting point in the middle. It has to be one or other of the end nodes. In Inskcape you can reverse the path direction using Path > Reverse. Path direction affects the entire path. You can't have sections of a compound path running in different directions. Only open paths have a start and end node (see note below).

If you want you can change the preferences to show the path direction. Click Edit > Preferences > Node. Select the option that says "show path direction on outlines".

When you show the path direction by clicking on the path using the Nodes Tool, there are little arrows shown on the path like this example:

enter image description here

Note: A closed path has no start node as such, only a direction. There's no way to indicate a start node in the middle of a closed path, or to have sections of path running in different directions. Path direction affects the entire path. Although there might be a way of editing the SVG XML so that a particular node comes first in the path data - but you'd need to do that manually. As far as I know, there is no way to select a node in a closed path and change it to be the first one by applying some setting in Inkscape. Perhaps there's an extension somewhere (or someone could write one) that could do it, but I haven't found one.

| improve this answer | |
  • I mean primarily for closed paths. Since it is an SVG editor, and editor has a first node, I was hoping there'd be a way of selecting it (since it apperas Illustrator has a way to do so when editing). Also if I have multipe open curves I'd like to select which order them come in. – edA-qa mort-ora-y Dec 13 '17 at 14:39
  • Hmmm. Not sure what you mean by "it appears Illustrator has a way to do so when editing". I've never seen such functionality. If you mean when drawing a path, then yes perhaps. The first node you create will be the first in the path data. But changing which node is the first in the path data is another thing entirely. Redrawing the curve starting with the node you want is an option. As for paths being in order, then perhaps yes if you mean the stack using Object > raise, lower, raise to top, lower to bottom – Billy Kerr Dec 13 '17 at 14:53
  • I found several references for Illustrator when searching for Inkscape... but they may have all been scripts that do it. As to multiple curves I mean a single path with multiple segments (multiple SVG Close/Move commands in one path data). – edA-qa mort-ora-y Dec 14 '17 at 18:12
1

I'm late here but, here's the solution I found:

I'm creating a "shape separator" for a web page. I created the curves manually by coding the SVG by hand, but I am using InkScape to calculate the intersection of the shapes and I explicitly want the bottom-left corner to be the starting vertex.

main work

Solution:

  • On the closed path, select the node you want to be the "first". In this example I used

setup

  • Click the "break path" tool.

open tool

  • Move the last node away so you can viaully see what's happening next

moved vertex

  • Delete it. Now you have a path that, if it was closed, would be what you'd be wanting.

deleted vertex

  • Set the path direction as you desire (as Billy Kerr said).
  • And now save in "plain SVG".

Find the shape in the source. I like to break it down with new-lines so I can clearly see the commands of the SVG path all them aligned in a column:

<path id="overlap" d="
    M 0,100
    C 4.5535681,77.232159 8.6760028,58.507302 12.802734,44.185547
    C 19.217072,33.746375 24.557462,27.608473 28.488281,25.675781
    C 38.980486,35.823941 52.270327,58.246413 65,56
    C 68.894757,55.480699 72.585852,53.805739 76.058594,51.011719
    C 77.212366,52.282377 78.224994,53.335709 79,54
    C 87 60 96 54 100 52
    V 100
" />
  • Add a Z behind the last node to indicate the SVG to close the shape. In my example see the Z I added after the V 100:
<path id="overlap" d="
    M 0,100
    C 4.5535681,77.232159 8.6760028,58.507302 12.802734,44.185547
    C 19.217072,33.746375 24.557462,27.608473 28.488281,25.675781
    C 38.980486,35.823941 52.270327,58.246413 65,56
    C 68.894757,55.480699 72.585852,53.805739 76.058594,51.011719
    C 77.212366,52.282377 78.224994,53.335709 79,54
    C 87 60 96 54 100 52
    V 100
    Z
" />

I then copied the path again inside my original SVG.

Without the Z command:

without Z

With the Z command:

enter image description here

And here's my end result

I really did not need the Z as I use it without borders in the final place. So finally with or without Z would look the same. In the final SVG all the layers are transparent except for the "inkscape-edited shape" which is set to white without transparency. But I ensure I have all the "starting points" under my control in a known position, intended for animations and other tricks:

final shape separator

| improve this answer | |
  • Using this method before doing Save as Type...Optimized SVG allowed me to define the starting point as the one nearest my origin, which reduced the number of characters in my optimized SVG, and additionally reduced the number of significant digits I needed for coordinates. Altogether this allowed me to create a significantly smaller hand-optimized SVG! – Micah Lindstrom Apr 27 at 8:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.