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?
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.
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.
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?
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.
What language did you write this in ? Javascript / Python ?
Javascript
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