嵌套svg符号，并相对于父符号进行缩放和平移

我希望将一组svg五边形相互嵌套，以获得如下结果：

我可以通过手动设置相对于外部svg的

translate

和

scale

值来实现这一点

<svg class="defs-only"
     xmlns="http://www.w3.org/2000/svg"
     style="display: none;">
  <symbol id="pentagon">
    <polygon
points="
190.2113,0
0,138.1966
72.6542,361.8034
307.7684,361.8034
380.4226,138.1966
"/>
  </symbol>
</svg>

<svg id="1" style="fill:#666" viewBox="0 0 380 362" width="380" height="362">
  <use xlink:href="#pentagon"/>

  <svg id="2" style="fill:#777" viewBox="0 0 380 362" width="380" height="362">
    <use xlink:href="#pentagon" transform="translate(72.5 138) scale(0.618 0.618)"/>

    <svg id="3" style="fill:#888" viewBox="0 0 380 362" width="380" height="362">
      <use xlink:href="#pentagon" transform="translate(118 225) scale(0.381924 0.381924)"/>
    </svg>  
  </svg>
</svg>

是否有一种方法可以在每个嵌套层中使用相同的

translate

和

scale

值，并将这些值相对于直接父级？这是否意味着对

翻译使用百分比值，这是否可行

这是一张支票

上下文：最终，我希望用户能够拖动形状，每个形状相对于其父对象以相同的方式移动，以便能够创建如下图像：




编辑：这是答案。
是的。像这样：