Question

我是SVG的新手，我很难将我的多个图像分组为一个。它应该看起来像带有基座的棒球钻石。我已经能够绘制所有内容，并且可以一次单击并拖动每个项目。我试图一键移动整个图像。有什么建议吗？

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

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

    <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>
    </svg>

     </html>

Answer 1

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

<强>以下步骤： -

1）将所有形状放在'g'标签

中

2）对此g标签应用'drag'（'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>

SVG遇到分组问题

1 个答案: