# Path.pathData has incorrect positioning

**URL:** <https://forums.creativeclouddeveloper.com/t/path-pathdata-has-incorrect-positioning/1276>\
**Category:** UXP Plugin API\
**Tags:** api-feedback\
**Created:** [October 2, 2019, 6:35pm UTC](https://forums.creativeclouddeveloper.com/t/path-pathdata-has-incorrect-positioning/1276 "2019-10-02T18:35:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Uladzimir.Poddubny](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Uladzimir.Poddubny](https://forums.creativeclouddeveloper.com/u/Uladzimir.Poddubny)\
**Post date:** [October 2, 2019, 6:35pm UTC](https://forums.creativeclouddeveloper.com/t/path-pathdata-has-incorrect-positioning/1276/1 "2019-10-02T18:35:03Z")

</div>

**Short summary** : _pathData_ of _Path_ element returns SVG data relative to **Global Bounds** at the moment when this element **was created**. And SVG data is not being changed when I move this element. I would expect it to return SVG data relative to Path element itself.

Adobe XD version: 22.7.12.3 (Starter), Creative Cloud Sync 4.3.12.14

**Long Description:**

> Unfortunately I can’t put more than one image and two links in one post due to Adobe Forum rules. I am forced to join 5 images to one big. You can open this image by following link:[[https://ibb.co/51VHvL2]](https://ibb.co/51VHvL2). Sorry about that.

There is a _Path_ type for some elements in Adobe XD API ([https://adobexdplatform.com/plugin-docs/reference/scenegraph.html#Path](https://adobexdplatform.com/plugin-docs/reference/scenegraph.html#Path)). Such type of element may be created by _Pen_ tool (as an example).

I wrote a simple plugin for demonstration purpose to show the data of Path elements. I also created two artboards and drew a grid with size 100x100 - just for better position tracking.

So I drew a simple curve with _Pen_.

`[See Image 1]`  
It has following properties:

> Name: Path 1  
> boundsInParent: {“x”:8.826140403747559,“y”:15.997379302978516,“width”:26.56603240966797,“height”:45.04535675048828}  
> globalBounds: {“x”:8.826140403747559,“y”:15.997379302978516,“width”:26.56603240966797,“height”:45.04535675048828}  
> pathData:  
> M 8.826140403747559 15.99737930297852 C 8.826140403747559 62.93814086914063 30.89148712158203 68.402587890625 34.75292587280273 54.06010818481445 C 38.61436462402344 39.71763229370117 23.72025108337402 15.99737930297852 23.72025108337402 15.99737930297852

Then I added one more curve.  
`[See Image 2]`  
Here are the properties of both curves:

> Name: Path 1  
> boundsInParent: {“x”:8.826140403747559,“y”:15.997379302978516,“width”:26.56603240966797,“height”:45.04535675048828}  
> globalBounds: {“x”:8.826140403747559,“y”:15.997379302978516,“width”:26.56603240966797,“height”:45.04535675048828}  
> pathData:  
> M 8.826140403747559 15.99737930297852 C 8.826140403747559 62.93814086914063 30.89148712158203 68.402587890625 34.75292587280273 54.06010818481445 C 38.61436462402344 39.71763229370117 23.72025108337402 15.99737930297852 23.72025108337402 15.99737930297852
> 
> Name: Path 2  
> boundsInParent: {“x”:111.08058166503906,“y”:23,“width”:8.886444091796875,“height”:33.65109634399414}  
> globalBounds: {“x”:111.08058166503906,“y”:23,“width”:8.886444091796875,“height”:33.65109634399414}  
> pathData:  
> M 111.0805816650391 23 C 131.0750885009766 53.31867980957031 111.0805816650391 56.65109634399414 111.0805816650391 56.65109634399414

So the _pathData_ of second line starts from the point with coordinates [111, 23], which means that it’s coordinates are bound to either _boundsInParent_ or _globalBounds_. The first problem is if I use pathData to export Path 2 and use it in other place (for example, in `<svg>` element in HTML), I will need to create large element (at least with width of 111) and the left border of this element will be far away from the line itself.

Then I moved _Path 1_ line to the right.  
`[See Image 3]`  
But the pathData of both element hasn’t been changed.

> Name: Path 1  
> boundsInParent: {“x”:210.82614040374756,“y”:15.997379302978516,“width”:26.56603240966797,“height”:45.04535675048828}  
> globalBounds: {“x”:210.82614135742188,“y”:15.997379302978516,“width”:26.5660400390625,“height”:45.04535675048828}  
> pathData:  
> M 8.826140403747559 15.99737930297852 C 8.826140403747559 62.93814086914063 30.89148712158203 68.402587890625 34.75292587280273 54.06010818481445 C 38.61436462402344 39.71763229370117 23.72025108337402 15.99737930297852 23.72025108337402 15.99737930297852
> 
> Name: Path 2  
> boundsInParent: {“x”:111.08058166503906,“y”:23,“width”:8.886444091796875,“height”:33.65109634399414}  
> globalBounds: {“x”:111.08058166503906,“y”:23,“width”:8.886444091796875,“height”:33.65109634399414}  
> pathData:  
> M 111.0805816650391 23 C 131.0750885009766 53.31867980957031 111.0805816650391 56.65109634399414 111.0805816650391 56.65109634399414

The second problem is when I export the whole artboard and use _pathData_ of both elements - _Path 1_ will be located in the old position, before _Path 2_ (if I put both Path 1 and Path 2 _pathData_ to singe `<svg>` element) or (if I create two different `<svg>` elements) the second element will have it left border far away from the line itself.

Then I moved Paths-Artboard to the left  
`[See Image 4]`

and added one more curve - _Path 3_.  
`[See Image 5]`

Here is the data of all three paths:

> Name: Path 1  
> boundsInParent: {“x”:210.82614040374756,“y”:15.997379302978516,“width”:26.56603240966797,“height”:45.04535675048828}  
> globalBounds: {“x”:1054.826171875,“y”:15.997379302978516,“width”:26.5660400390625,“height”:45.04535675048828}  
> pathData:  
> M 8.826140403747559 15.99737930297852 C 8.826140403747559 62.93814086914063 30.89148712158203 68.402587890625 34.75292587280273 54.06010818481445 C 38.61436462402344 39.71763229370117 23.72025108337402 15.99737930297852 23.72025108337402 15.99737930297852
> 
> Name: Path 2  
> boundsInParent: {“x”:111.08058166503906,“y”:23,“width”:8.886444091796875,“height”:33.65109634399414}  
> globalBounds: {“x”:955.08056640625,“y”:23,“width”:8.886474609375,“height”:33.65109634399414}  
> pathData:  
> M 111.0805816650391 23 C 131.0750885009766 53.31867980957031 111.0805816650391 56.65109634399414 111.0805816650391 56.65109634399414
> 
> Name: Path 3  
> boundsInParent: {“x”:10.209716796875,“y”:117.74542236328125,“width”:18.8836669921875,“height”:32.88447570800781}  
> globalBounds: {“x”:854.209716796875,“y”:117.74542236328125,“width”:18.8836669921875,“height”:32.88447570800781}  
> pathData:  
> M 854.209716796875 117.7454223632813 C 864.2069702148438 164.3992614746094 873.0933837890625 147.7371826171875 873.0933837890625 147.7371826171875

The first point of _Path 3_ element in _pathData_ has position [854, 117]. Which means it is positioned relatively to Global coordinates. If it was positioned relatively to Artboard coordinates it would have something like [10, 117]. But the pathData of two first paths hasn’t been changed. So if I export the whole artboard there is no way for me to draw all three `<svg>` elements with correct position - because there is no way to find out the _globalBounds_ of element when these _Path_ elements were created.

It would be very helpful to have _pathData_ positioned to the Path element itself. So there will be no problems with moving elements/artboards. Or at least have _pathData_ updated - so the Path element could be positioned correctly when exported.

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [October 2, 2019, 7:22pm UTC](https://forums.creativeclouddeveloper.com/t/path-pathdata-has-incorrect-positioning/1276/2 "2019-10-02T19:22:57Z")

</div>

Thanks for reporting this - our team will review this.

---

<div class="post-metadata">

**Author:** ![cpryland](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/cpryland/32/1172_2.png) [@cpryland](https://forums.creativeclouddeveloper.com/u/cpryland)\
**Post date:** [October 2, 2019, 7:29pm UTC](https://forums.creativeclouddeveloper.com/t/path-pathdata-has-incorrect-positioning/1276/3 "2019-10-02T19:29:33Z")

</div>

Agreed. Perhaps `node.relativePathData` could give you a path relative to the path’s origin?
