Convert pathData to Relative

Adobe XD UXP Plugin API
,
1

I’m working on plugin which would export some design from Adobe XD to third-party tool.
There is a Pen tool which allows drawing lines and curves. These lines and curves are Path type. There is a pathData property in Path type - it return SVG data in Absolute coordinates. And I need an SVG data in Relative coordinates.

I couldn’t find out what is the start point for these absolute coordinates. For example, I have 800x1200 size Artboard, where I have some Pen drawing with top left coordinates like 10, 10. The pathData property of this drawing returns something like:

M 6158.45703125 6874.39697265625 C 6065.7451171875 6985.994140625 5948.9970703125 7071.83837890625 6112.10107421875 7015.18115234375 C 6275.205078125 6958.52392578125 6146.8681640625 6903.15478515625 6158.45703125 6865.8125

4000? 6000? The artboard is not even 1000 size by it’s width, and the size of Pen drawing is like 300x300.

So all solutions I found in the Interned use HTML with element inside to convert coordinates - which is not quite my case. So how do I convert this coordinates to Relative with Javascript only?

Thanks!

P.S. It would be great to have this functionality as part of Adobe XD API. Something like Path.relativePathData. Because it’s much more reliable to get path data from existing SVG, than parsing/converting it with possible errors.

1 Like
2

I’m pretty sure scenenode.pathData is relative path data.

Try creating a simple path with the pen tool, and examine the pathData property with our (free) Layers for Developers plugin. Then move it somewhere; you’ll see pathData doesn’t change. Even rotation doesn’t change the path. Scaling does.

Not sure where the large units are coming from, in your case. It sounds like a bug of some sort.

1 Like
3

@Uladzimir.Poddubny I posted about this and there was interesting discussion but can’t find it now.

@cpryland IIRC the large values come from using a global position. If you draw in the upper left hand corner of the first artboard sized 1000x1000 then the values might look correct at 0 x 0. But you add a second artboard next to it then the path data might start at 1000x0.

The transform matrix can help you find the relative values but it’s challenging to modify the path data to be relative.

I have an idea. If you temporarily moved those objects to the first artboard, group and ungroup them it might create artboard relative values or it might simply update the transform matrix. If that works then
group them again if needed and move them back to the original position in the original artboard.

1 Like