开发者

SVG "Move" command: Absolute path to Relative Path

I have a SVG path, created in Inkscape, that is a single Move ("M ... z") command. The uppercase 'M', as per the SVG spec, indicates an absolute path, however for my application I require relative paths.

What is the algorithm to convert an absolute path to a relative path? Do I start with the last x and y coordinates and respectively subtract the previous value until I get to the start of the values? Bonus marks for:

  • Converting the path to relative for me (meh)
  • Providing a link to a resource of some sort that will convert between absolute and relative SVG paths OR pointing out how to do this with Inkscape (I've searched the mailing list and found other users talking about having to recompile from source to add the option manually :|)
  • Giving a jquery one-liner that will convert aboslute to relative and vice-versa

The path in question is an explosion-ey sort of starburst:

M 9.6428572,4.8214285 17.857142,19.285714 0.89285714,22.142857 17.678572,29.285714 1.9642857,41.071429 23.75,37.678572 26.071429,49.285714 37.321428,38.75 47.5,48.392857 51.607143,37.5 61.964286,48.214286 62.321429,34.285714 78.392857,37.857143 64.107143,24.464286 81.071428,21.607143 63.928571,17.857143 70.535714,3.5714284 54.821429,12.142857 50,1.2499999 40.535714,10.714286 31.607143,0.89285704 28.035714,13.928571 z

I've searched SO for similar开发者_如何学JAVA questions, but only found questions about OS paths or relative to absolute SVG paths (and none of them were specifically asking about the algorithm to do so). If this is a duplicate feel free to close it.

Thanks!


EDIT: I now have an online program to do this more generally: http://petercollingridge.appspot.com/svg_transforms

The path you want is:

d="m9.6428572,4.8214285 8.214285,14.464285 -16.964285,2.857143 16.785715,7.142857 -15.714286,11.785715 21.785714,-3.392857 2.321429,11.607142 11.249999,-10.535714 10.178572,9.642857 4.107143,-10.892857 10.357143,10.714286 0.357143,-13.928572 16.071428,3.571429 -14.285714,-13.392857 16.964285,-2.857143 -17.142857,-3.750000 6.607143,-14.285715 -15.714285,8.571429 -4.821429,-10.892857 -9.464286,9.464286 -8.928571,-9.821429 -3.571429,13.035714z"/>

I guess you start from the last coordinate pair and work backwards, put it's just as easy to start at the second coordinate pair and minus the previous one (and a bit more efficient as you don't have to repeatedly look up the same value).

I did this in Python, but I'm sure it could be done with Javascript relatively easily.

d = "9.6428572,4.8214285 17.857142,19.285714 0.89285714,22.142857 17.678572,29.285714 1.9642857,41.071429 23.75,37.678572 26.071429,49.285714 37.321428,38.75 47.5,48.392857 51.607143,37.5 61.964286,48.214286 62.321429,34.285714 78.392857,37.857143 64.107143,24.464286 81.071428,21.607143 63.928571,17.857143 70.535714,3.5714284 54.821429,12.142857 50,1.2499999 40.535714,10.714286 31.607143,0.89285704 28.035714,13.928571"
c = [map(float,l.split(',')) for l in d.split()]
c2 = ["%.6f,%.6f" % (c[n][0] - c[n-1][0], c[n][1] - c[n-1][1]) for n in range(1, len(c))]
print "%.6f,%.6f " % (c[0][0], c[0][1]) + ' '.join(c2)
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜