CODEWITHSUNDEEP
javascriptsvgraphael
zero
zero

Reputation: 3082

part of raphael svg path is stuck in place

i'm testing a vector (of a hand) using raphael.js and i was under the impression that the "M" parameter indicates where to start drawing a path, but in my example: http://jsfiddle.net/7QA43/1/ when i changed the parameter's of M (from 361,243 to 100,100) it seems part of the pinky is some how "anchored" to the original position.

I've scanned through the svg path data for something that may be causing this, but i can;t find it.

could part of the path be off?

Upvotes: 1

Views: 286

Answers (1)

Phrogz
Phrogz

Reputation: 303198

In an SVG path there are two flavors of all path commands: absolute and relative.

  • Absolute path commands are noted by an uppercase letter and indicate coordinates specified irrespective of the previous point.
  • Relative path commands are noted by a lowercase letter and indicate coordinates specified relative to the previous path command's location.

All your path commands are relative except the last CurveTo command:
"...44-1.436,3.662-2.155C357.073,245.799,359.609,244.566,361.839,243.057z"

From the specs:

Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. C (uppercase) indicates that absolute coordinates will follow; c (lowercase) indicates that relative coordinates will follow. Multiple sets of coordinates may be specified to draw a polybézier. At the end of the command, the new current point becomes the final (x,y) coordinate pair used in the polybézier.

The simplest fix is to just remove this command from your path with very little apparent difference:

Fixed via Deletion: http://jsfiddle.net/7QA43/2/

Alternatively, don't use the first MoveTo command to adjust your path's location. Keep your path as it was and transform() it to a new location:

path_a.transform('t-200,-154');

Fixed via Transform: http://jsfiddle.net/7QA43/5/

Fixing the problem by finding the last coordinate of the command before the offending CurveTo and changing the parameters to use relative values is left as an exercise for the reader.

Upvotes: 2

Related Questions