KonvaJS apply transform matrix to React.Shape

Question

Given the following rect in SVG.

<rect xmlns="http://www.w3.org/2000/svg" x="72.036" y="156.473" transform="matrix(0.1727 -0.985 0.985 0.1727 -83.7081 215.7814)" style="fill:none;stroke:#020202;stroke-width:0.5;stroke-miterlimit:10;" width="29.129" height="2.498"/>

Above rect would like to render accordingly in KonvaJS as a Konva.Rect https://konvajs.github.io/api/Konva.Rect.html

Based on decomposition of the matrix the following should be applied: translate(-83.7081, 215.781) rotate(-80.0554125754873) scale(1.0000251446838724)

As I understand rotation, scale and skew can be applied but how to apply translate values? Should they be added to x and y or to offsetX/offsetY instead?

Or is there a way to apply Transform class to the Rect?

Thank you.

Answer 1

You should use {x,y} properties.

Or is there a way to apply Transform class to the Rect?

No, public API doesn't allow this.