SVG的分组问题

我是SVG新手，很难将多个图像组合成一个。它应该看起来像一个棒球场上的带底座的钻石。我已经能够画出所有的东西，并可以点击和拖动每个项目，一次一个。我正试图通过单击移动整个图像。有什么建议吗

我有一些JavaScript，它允许我的SVG作为单独的部分在页面上移动

SVG我试图让这个SVG元素在单击并拖动页面时作为一个元素保持在一起。我不知道该怎么做。我尝试过使用标签以及其他几个容器标签。目前，所有内容都是单独拖动的

---

为了同时拖动所有形状，需要对它们进行分组

步骤：-

1） 将所有形状放置在“g”标记中

2） 在此g标记（“mousemove”）上应用“拖动”。表示将平移矩阵应用于该g

3） 在“mouseup”事件中，更新各个形状的最新值

<g class='draggable'>
 <rect class="draggable" x="62.226" y="62.227" transform="matrix(0.7071 0.7071 -0.7071 0.7071 210.7484   -87.2942)" fill="#088A08" stroke="#000000" width="297.043" height="297.041"
        transform="matrix(1 0 0 1 0 0)" > </rect>
    <rect class="draggable" x="197.138" y="25.591" transform="matrix(0.7071 0.7071 -0.7071 0.7071 89.4451   -137.5392)" fill="#FFFFFF" stroke="#000000" width="27.219" height="27.219"
        transform="matrix(1 0 0 1 0 0)" ></rect>
    <rect class="draggable" x="26.371" y="197.557" transform="matrix(0.7071 0.7071 -0.7071 0.7071 161.0362 33.5847)" fill="#FFFFFF" stroke="#000000" width="27.22" height="27.218"
        transform="matrix(1 0 0 1 0 0)" ></rect>
    <rect class="draggable" x="369.362" y="197.298" transform="matrix(0.7071 0.7072 -0.7072 0.7071 261.33 -209.0369)"   fill="#FFFFFF" stroke="#000000" width="27.22" height="27.217"></rect>
    <polygon class="draggable" fill="#FFFFFF" stroke="#000000" points="194.912,364.45 227.945,364.45            227.378,383.915 211.578,399.717 195.778,383.915 "
        transform="matrix(1 0 0 1 0 0)" ></polygon>
</g>

<g class='draggable'>
 <rect class="draggable" x="62.226" y="62.227" transform="matrix(0.7071 0.7071 -0.7071 0.7071 210.7484   -87.2942)" fill="#088A08" stroke="#000000" width="297.043" height="297.041"
        transform="matrix(1 0 0 1 0 0)" > </rect>
    <rect class="draggable" x="197.138" y="25.591" transform="matrix(0.7071 0.7071 -0.7071 0.7071 89.4451   -137.5392)" fill="#FFFFFF" stroke="#000000" width="27.219" height="27.219"
        transform="matrix(1 0 0 1 0 0)" ></rect>
    <rect class="draggable" x="26.371" y="197.557" transform="matrix(0.7071 0.7071 -0.7071 0.7071 161.0362 33.5847)" fill="#FFFFFF" stroke="#000000" width="27.22" height="27.218"
        transform="matrix(1 0 0 1 0 0)" ></rect>
    <rect class="draggable" x="369.362" y="197.298" transform="matrix(0.7071 0.7072 -0.7072 0.7071 261.33 -209.0369)"   fill="#FFFFFF" stroke="#000000" width="27.22" height="27.217"></rect>
    <polygon class="draggable" fill="#FFFFFF" stroke="#000000" points="194.912,364.45 227.945,364.45            227.378,383.915 211.578,399.717 195.778,383.915 "
        transform="matrix(1 0 0 1 0 0)" ></polygon>
</g>