Inkscape.org
Beyond the Basics How to scale object programaticaly (issue setting transform-origin)
  1. #1
    ubik ubik @ubik

    I am creating an SVG object and applying a transform:scale(n) to it, but when I open the object in Inkscape, the transform is applied as if the transform origin is (0, 0) despite me trying to set the origin. I tried using the style attribute, but that doesn't work and I also tried using the transformOrigin attribute but that doesn't work either. Does anyone know how I can achieve this from the web, so that it can also work within Inkscape?

  2. #2
    ubik ubik @ubik

    Follow-up: I did a fair bit of research and it looks like there's no way to set a transform origin that is compatible with SVG1.1/Inkscape. I found a workaround by making a matrix transform including the scale and then compensating with a translate to correct the offset. I figured out a value that works manually (seeing what felt right) then I applied a rule of three to reproduce the same operation at different scales. After a bit of trial and error I was able to get the result I was looking for.

  3. #3
    inklinea inklinea @inklinea⛰️

    What language did you write this in ? Javascript / Python ?

  4. #4
    ubik ubik @ubik

    Javascript

  5. #5
    inklinea inklinea @inklinea⛰️
    *

    Transform-origin has been around for a long time. However if I remember, it was not supported widely until 2020 ? I think Mozilla shows it as firefox 77.

    You should be able to retrieve the bounding box of the object before the scale using the browser DOM. If you take left and top ( x1, y1 ) and multiply by the scale it should give an appropriate translate value.

    transform = translate(x1*scale_value, y1*scale_value) scale(scale_value) 

    Applied from left to right.  [ Correction that should say 'right to left' !!! ]

    However I haven't used Javascript for a while

Inkscape Inkscape.org Inkscape Forum Beyond the Basics How to scale object programaticaly (issue setting transform-origin)