SVG“移动”命令：绝对路径到相对路径

发布于 2024-11-18 21:51:28 字数 930 浏览 3 评论 0原文

我有一个在 Inkscape 中创建的 SVG 路径，它是一个 Move (“M ... z”) 命令。根据 SVG 规范，大写“M”表示绝对路径，但对于我的应用程序，我需要相对路径。

将绝对路径转换为相对路径的算法是什么？我是否从最后一个 x 和 y 坐标开始，分别减去之前的值，直到到达值的开头？奖励分数：

将路径转换为相对路径（meh）
提供某种资源的链接，该资源将在绝对和相对 SVG 路径之间进行转换，或者指出如何使用 Inkscape 执行此操作（我已经搜索了邮件列表，并且发现其他用户正在谈论必须从源代码重新编译以手动添加选项:|)
提供一个 jquery 单行代码，将绝对值转换为相对值，反之亦然。

所讨论的路径是一种爆炸式的星爆：

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

我搜索过类似的问题，但只找到了有关操作系统路径或相对于绝对 SVG 路径的问题（并且没有一个人专门询问这样做的算法）。如果这是重复的，请随时关闭它。

谢谢！

原文

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 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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

翻身的咸鱼 2024-11-25 21:51:28

编辑：我现在有一个在线程序可以更普遍地执行此操作：
http://petercollingridge.appspot.com/svg_transforms

你想要的路径是：

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"/>

我猜你从最后一个坐标对并向后工作，从第二个坐标对开始并减去前一个坐标对同样容易（而且效率更高一点，因为您不必重复查找相同的坐标对）价值）。

我是用 Python 完成的，但我确信用 Javascript 也可以相对轻松地完成。

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)

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 原文

~没有更多了~