Creating an object with pathData

Greetings everyone,
I’m currently having trouble trying to generate objects from svg pathData instead of width/height. Let’s say I’m trying to create a rectangle, refeering to the pathData instead of width/height, like the following example:

let rect = new Rectangle();
rect.pathData = ‘M 0 0 L 325 0 L 325 55 L 0 55 Z’;
rect.fill = 4278217177;
rect.stroke = 4278217177;

I get the following feedback:
“Plugin TypeError: Cannot set property pathData of [object Object] which has only a getter at functionName.”

Am I missing something? Is object.pathData a read-only parameter?

1 Like

From the docs ( of a “Path”:

Representation of the path outline in SVG <path> syntax. Unlike other node types, pathData is writable here. Syntax is automatically normalized, so the getter may return a slightly different string than what you passed to the setter.

Therefore, path data is only “writeable” for Path nodes (not for rectangles – for everything but paths, they’re read-only). See also the pathData docs for GraphicsNode (

Returns a representation of the node’s outline in SVG <path> syntax. Note that only nodes with strokePosition == GraphicNode.CENTER_STROKE can be faithfully rendered in actual SVG using the exact pathData shown here.
Kind : instance property of GraphicNode Read only : true


This is a snippet that works for me:

let triangleSide = 100;

let triangleHeight = triangleSide * (Math.sqrt(3)/2);

pathData =


function drawPath()
let path = new Path();
path.pathData = pathData;
path.fill = new Color("#000000");
path.fillEnabled = true;
path.stroke = new Color("#000000");
path.strokeEnabled = false;
mainSelection.items = [path];

That’s what I was fearing, but I guess that part of the docs sneaked around me. Thanks a lot for clearing that out for me!

1 Like

I may need to try creating a Path instead of Rectangles, Ellipses and recreate what I am trying to achieve. Thanks a lot for sharing your snippet!

May I ask why? From what I’ve seen so far, it’s replacing new Rectangle() with new Path(), is it not :wink:?


The problem is that for my particular case I wish to create specifically a Rectangle object instead of a Path one, as in a Rectangle you’re able to set certain stuff like border-radius. I was able to visually simulate it by using a Path instead, but I lose some functionality on the result object. But it is what it is, and I can see why other objects can’t be built by simply feeding some pathData. I guess I was just testing my luck. :sweat_smile:


hi @psa,

why simulating a Rectangle using a Path?

1 Like

As @PaoloBiagini says, why is that a problem? You should be able to take your path and make an equivalent Rectangle with no problem.

Maybe I’m not understanding correctly, but creating a Path and a Rectangle it’s not the same thing, regarding how the user is able to manipulate the two objects, some parameters like “border-radius” are only available for Rectangle objects. As in my particular case I need to generate them only by providing the pathData, I’m not able to create a Rectangle, but instead a Path. Or am I missing something?

Doesn’t this sample code work for you?

let rect = new Rectangle();
rect.width = 200;
rect.height = 100;
rect.fill = new Color("#FF0000");

Did you import the Rectangle class through require?

The problem here is creating a new Rectangle using only the pathData parameter, and not the width/height.
Something like the following:

let rect = new Rectangle();
rect.pathData = ‘M 0 0 L 325 0 L 325 55 L 0 55 Z’;
rect.fill = 4278217177;
rect.stroke = 4278217177;

This is not possible apparently, so I need to figure out another solution eventually. But thanks everyone for trying to help! :wink: