嵌套具有相对于父项的缩放和平移的 svg 符号

Question

我想将一组 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 值，并使这些值相对于直接父级？这是否意味着对 translate 使用百分比值，这可能吗？

这里是 jsFiddle.

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

source

编辑：这是 final version of the game。

Answer 1

是的。像这样：

<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 viewBox="0 0 380 362" width="380" height="362">

    <g id="pent2and3">
        <use xlink:href="#pentagon" style="fill:#777"/>
        <use xlink:href="#pentagon" style="fill:#888" transform="translate(72.5 138) scale(0.618 0.618)"/>
    </g>

    <g id="pent1">
        <use xlink:href="#pentagon" style="fill:#666"/>
        <use xlink:href="#pent2and3" transform="translate(72.5 138) scale(0.618 0.618)"/>
    </g>

</svg>

嵌套具有相对于父项的缩放和平移的 svg 符号

Nesting an svg symbol with scaling and translation relative to parent

svg

nested

translate

scale