Skip to content

Svg rotate transformation ignores explicit origin #3244

@CakeWithDivinity

Description

@CakeWithDivinity

Describe the bug
The rotate transformation of SVG elements can accept up to 3 arguments: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform#rotate

The first one is the angle, while the other two can be used to specify the coordinates of the point from where the element should be rotated.

Currently react-pdf ignores those arguments:

This means that you are unable to rotate elements at a custom point (for example the center of the element), instead it will always rotate around (0, 0).

There was already one bug report about this before, which got closed, because the reproduction was misunderstood: #2275
In the issue, the blue and red rectangle should not align, because the red rectangle should be rotated around (3, 3) while it gets rotated around (0, 0) like the blue rectangle.

To Reproduce
react-pdf REPL

Expected behavior
In this example the red and blue rectangles should not align.

This is what the actual svg rendered by a browser looks like:
https://codepen.io/kaesekuchendev/pen/EaKVrbw

Screenshots
Current react-pdf:
Image

How the browser renders the same svg:
Image

Desktop

  • OS: Linux
  • Browser Firefox
  • React-pdf version 4.2.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions