Skip to content

text-anchor offsets when mirroring text with transform-box/origin #150

@ddscharfe

Description

@ddscharfe

Hi, thank you for your great work on JSVG!

I ran into a problem with text mirroring when using transform-box: fill-box and transform-origin: center:

Minimal SVG:

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <text x="200" y="80" font-size="25" text-anchor="middle" style="transform-box: fill-box; transform-origin: center; transform: scale(1, -1);">
        MIRROR ME
    </text>            
    <text x="200" y="80" font-size="25" text-anchor="middle" >_____________</text>
</svg>

Expected (browser):
Image

JSVG behavior:

  • scale(1, -1) is ignored unless I remove the comma: scale(1 -1)
  • with scale(1 -1) it does mirror, but the text is shifted vertically (roughly by its own height):
Image

Horizontal mirroring (scale(-1 1)) appears to work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions