如何修改HTML <g>元素尺寸？缩小JSFiddle中火箭图形求助

我帮你梳理了这个火箭动画的实现逻辑，要把火箭调小其实很简单，只要针对核心CSS样式做比例调整就行，具体步骤如下：

• 第一步：缩小火箭主体的基础尺寸
  找到.rocket选择器，修改它的width和height属性，比如原代码里的主体尺寸可能是：

  .rocket {
    width: 100px;
    height: 200px;
  }
  

  改成你想要的更小数值，比如按50%缩小：

  .rocket {
    width: 50px;
    height: 100px;
  }
  

  比例可以根据需求自由调整，比如想缩到原大小的70%，就把所有像素值乘以0.7。

• 第二步：同步调整内部元素的尺寸与定位
  火箭的驾驶舱窗户（.window）、尾翼（.fin）都是基于主体定位的，必须跟着修改才能协调：

  • 驾驶舱窗户：调整宽高和位置，原代码可能是：

    .window {
      width: 30px;
      height: 30px;
      top: 20px;
      left: 35px;
    }
    

    对应缩小后改成：

    .window {
      width: 15px;
      height: 15px;
      top: 10px;
      left: 17.5px;
    }
    

  • 尾翼：同理调整.fin的宽高和定位参数，比如把width从20px改成10px，height从60px改成30px，top和left也按比例减半。

• 第三步：调整火焰动画的尺寸
  火焰（.flame）的大小也要同步缩小，不然会和火箭主体比例失调，修改它的width和height，同时调整@keyframes flame里的尺寸变化参数，比如原动画里的width从20px到50px，改成10px到25px，保持比例一致。

• 第四步：修正整体定位（可选）
  如果缩小后火箭的位置偏移到容器边缘，可以调整.rocket的margin或者position属性，比如把margin-top从原数值减半，或者微调left/top的定位值。

记得所有元素的尺寸和定位尽量保持统一比例，这样缩小后的火箭才不会变形哦。

内容的提问来源于stack exchange，提问作者user5861184