I need help with moving the smoke group origan to the center so it will scale with the rocket.

ii have tried to do:

transform-origan: center; translate-box: box-fill;

to fix this problem but it seems to do nothing.

link: https://codepen.io/paulsanti/pen/eYydYgN

CodePudding user response：

You accidentally misspelled origin. It should be transform-origin.

CodePudding user response：

You can set your transform-origin using a specific 3-axis px position, and it will work:

<g id="smoke" style="transform-origin: 761px 491px 0px">

Not that this is not 761px in display pixels - it's actually 761 SVG units in the context of this SVG's coordinate system (the viewBox). The actual width in display pixels will be different depending on the scale it's displayed at, but you don't have to worry about that. . Your SVG has a viewBox of 0 0 1512 982, so the exact center is x: 1512/2, y: 982/2.

(For your smoke animation, you may want to shift the origin down 120 units or so, to transform-origin: 761px 610px 0px to line it up with the bottom section of the rocket)