Масштаб SVG (отцентрируйте ориганы)
Мне нужна помощь с перемещением оригана дымовой группы в центр, чтобы он масштабировался вместе с ракетой.
я пытался сделать:
трансформация-орган: центр; перевести-окно: поле-заполнить;
чтобы решить эту проблему, но, похоже, ничего не делает.
link: https://codepen.io/paulsanti/pen/eYydYgN
Ответы 2
Вы случайно ошиблись в происхождении. Должно быть transform-origin.
Вы можете установить transform-origin, используя определенное положение по 3-м осям px, и оно будет работать:
<g id = "smoke" style = "transform-origin: 761px 491px 0px">
Не то чтобы это не 761px в пикселях дисплея — на самом деле это 761 единица SVG в контексте системы координат этого SVG (viewBox). Фактическая ширина в пикселях дисплея будет отличаться в зависимости от масштаба, в котором он отображается, но вам не нужно об этом беспокоиться.
.
Ваш SVG имеет viewBox из 0 0 1512 982, поэтому точный центр равен x: 1512/2, y: 982/2.
(Для вашей анимации дыма вы можете сместить начало координат вниз примерно на 120 единиц, чтобы transform-origin: 761px 610px 0px выровнять его с нижней частью ракеты)