Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat transform svg #1370

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Feat transform svg #1370

wants to merge 4 commits into from

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