Does the order of transform functions matter in SVG transform? For instance if i want to scale a shape but preserving the original coordinates specified in it's translate, would it help to first translate and then scale:

transform="translate(100 100) scale(0.5)"

will change the size but not the 100 100 placement, wheras

transform="scale(0.5) translate(100 100)"

does change both the size and the placement?

  • 4
    What happens when you try these two approaches? To be honest, I think trying them out would answer your question.
    – Billy Kerr
    Nov 2, 2019 at 13:32

1 Answer 1


SVG transforms are applied in reverse order (e.g right-to-left) as detailed in the W3C spec: https://www.w3.org/TR/css-transforms-1/#svg-transform-functions

"the individual SVG transform functions must get post-multiplied"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy