ISSUE-2288: Consider adding rotate and move-forward path commands


Consider adding rotate and move-forward path commands

Raised by:
Cameron McCormack
Opened on:
Certain kinds of paths are difficult to write and similarly difficult to animate. One example is creating a path like this:


where the two path segments are of length 50, say, and the angle between them is 45 degrees. Currently you need to use trig to work out the end point of the second path segment. It would be handy if there were path data commands that let you specify this easily:

<path d="M100,100 h50 r45 f50"/>

Here, 'r' means rotate and 'f' means 'move forward'. For commands other than 'r', there will be a current angle/tangent to the path. The 'r' command just sets this. The 'f' command draws a straight line in the direction of the current angle.

Animating such a path to change the angle is also quite difficult, and normally requires decomposition into many animation steps. With 'r' and 'f', this becomes easy:

<path d="M100,100 h50 r45 f50">
<animate attributeName="d" values="M100,100 h50 r45 f50;
M100,100 h50 r135 f50;
M100,100 h50 r45 f50"
dur="2s" repeatCount="10"/>

This came out of some discussion Doug and I had about performing animation on a human-like figure (moving his arms).
Related Actions Items:
No related actions
Related emails:
  1. ISSUE-2288 (path-rotate-command): Consider adding rotate and move-forward path commands [SVG Core 2.0] (from on 2009-07-01)

Related notes:

No additional notes.

Display change log ATOM feed

Dirk Schulze <>, Chair, Chris Lilley <>, Staff Contact
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <>.
$Id: 2288.html,v 1.1 2020/01/17 13:20:58 carcone Exp $