Skip to content

Feat transform svg#1370

Open
Rucki wants to merge 4 commits intobpampuch:masterfrom
Rucki:feat_transformSvg
Open

Feat transform svg#1370
Rucki wants to merge 4 commits intobpampuch:masterfrom
Rucki:feat_transformSvg

Conversation

@Rucki
Copy link

@Rucki Rucki commented May 13, 2018

adding vector transformations like translate, scale and rotate of especially svg paths and other vector types

@Rucki
Copy link
Author

Rucki commented May 13, 2018

Please merge it, it is necessary for transforming the svg path.
It fixes #375 and #807

color: 'blue',
lineColor: 'yellow',
d: 'M150 0 L75 200 L225 200 Z',
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi ! I was wondering if there was svg support for pdfMake then I saw you pull request. Thanks for doing it !

Now that I'm here, I find the API not declarative enough comparing to the pdfMake API, and too far from the svg one.
A better alternative would be to contain those transformations on the element being transformed instead of separate instructions :

As requested in #807

{ type: 'rect', x: 150, y: 200, w: 150, h: 50, rotate:45, translate: {x: 10, y: 1}, scale: 1 }

However order of transforms do matters so maybe something like that would do the job:

{ 
  type: 'rect', 
  x: 150,
  y: 200,
  w: 150,
  h: 50,
  transform(s): [
    {translate: {x: 10, y: 1}},
    {rotate: 45},
    {scale: 1},
  ],
}

Which is close to the svg API transform="translate(10, 1) scale(-1, 1)"

And if it is needed to apply the same operations to multiple elements maybe introduce a node of type 'group' like the <g> node in svg ?

Last point, I we want a better svg support maybe introduce 2 other transforms : skew (and skewX and skewY) and matrix. Skew is not implemented by pdfkit but there is a generic transform method that can take any matrix, and the matrices for skew are available here : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

@MadhuJayaram
Copy link

Any idea when this SVG transformation functions will be available to use?

@MadhuJayaram
Copy link

does this allow SVG element to be passed in directly as is or do we need to manually build it to make it compatible with pdfmake?

@marcusy3k
Copy link

I wish the feature is available too, so far I just know we could do the undocumented way as below:

{ canvas : [ { type: 'path', d: 'M 10 10 l 100 0 l 0 100 l -100 0 Z' } ] }

@j-funk
Copy link

j-funk commented Nov 7, 2018

Curious why this was never merged? Looks like it was a large improvement on existing functionality despite not being close to the existing APIs as reviewers comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants