Html 如何拖动和旋转svg元素？

到目前为止，我已经制作了一个用户界面，允许您选择一个数字，然后它会创建大量的svg方块

我需要能够使每个svg正方形旋转和移动。类似于在microsoft office上旋转和拖动图像的方式

以下是我到目前为止的情况：

<script type="text/javascript">
    var number = 0;
    var squares = 0;
var h = ""
var x = '<svg width="100" height="100"><rect width="300" height="100" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /></svg>';

    function button1() {
        number = 1;
        document.getElementById("number").innerHTML = number;
    }

    function button2() {
        number = 2;
        document.getElementById("number").innerHTML = number;
    }

    function button3() {
        number = 3
        document.getElementById("number").innerHTML = number;
    }

    function button4() {
        number = 4;
        document.getElementById("number").innerHTML = number;
    }

    function button5() {
        number = 5;
        document.getElementById("number").innerHTML = number;
    }

    function button6() {
        number = 6;
        document.getElementById("number").innerHTML = number;
    }

    function button7() {
        number = 7;
        document.getElementById("number").innerHTML = number;
    }

    function button8() {
        number = 8;
        document.getElementById("number").innerHTML = number;
    }

    function button9() {
        number = 9;
        document.getElementById("number").innerHTML = number;
    }

    function button10() {
        number = 10;
        document.getElementById("number").innerHTML = number;
    }
    document.getElementById("number").innerHTML = number;

    function subbutton() {
        squares = number;
        document.getElementById("squares").innerHTML = number;
    }
    document.getElementById("squares").innerHTML = number;
</script>

<header>

<style type>
header {
    text-align: center;
    background-color: red;
}
h {
text-allign: center;
}

</style>

    <h> <br>How many squares do you want to try and pack?
    <br>
    <button type="button" onClick="button1()">1</button>
    <button type="button" onClick="button2()">2</button>
    <button type="button" onClick="button3()">3</button>
    <button type="button" onClick="button4()">4</button>
    <button type="button" onClick="button5()">5</button>
    <button type="button" onClick="button6()">6</button>
    <button type="button" onClick="button7()">7</button>
    <button type="button" onClick="button8()">8</button>
    <button type="button" onClick="button9()">9</button>
    <button type="button" onClick="button10()">10</button> --->
    <button type="button" onClick="subbutton(), draw()">Submit</button>
    <br>
    <br></h>

</header>

<script type="text/javascript">

function draw() {

h = '<style type=text/css>header {background-color: white;} h {visibility: hidden} </style>';
document.getElementById("h").innerHTML = h;

if (squares == 1) {
x = x;
document.getElementById("x").innerHTML = x; 
} else if (squares == 2) {
x = x + " " + x
document.getElementById("x").innerHTML = x;
} else if (squares == 3) {
    x = x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 4) {
    x = x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 5) {
    x = x + " " + x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 6) {
    x = x + " " + x + " " + x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 7) {
    x = x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 8) {
    x = x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 9) {
    x = x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
} else if (squares == 10) {
    x = x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x + " " + x;
document.getElementById("x").innerHTML = x;
}

}
document.getElementById("x").innerHTML = x;
document.getElementById("h").innerHTML = h;
</script>
<body>

<h id="h"></h>

<p id="squares"></p>
<style>
p {
visibility: hidden
</style>

<a id="x"></a>

</body>

var数=0；
var平方=0；
var h=“”
var x=“”；
功能按钮1（）{
数字=1；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮2（）{
数量=2；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮3（）{
数字=3
document.getElementById（“number”）.innerHTML=number；
}
功能按钮4（）{
数字=4；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮5（）{
数字=5；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮6（）{
数字=6；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮7（）{
数字=7；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮8（）{
数字=8；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮9（）{
数字=9；
document.getElementById（“number”）.innerHTML=number；
}
功能按钮10（）{
数字=10；
document.getElementById（“number”）.innerHTML=number；
}
document.getElementById（“number”）.innerHTML=number；
函数子按钮（）{
正方形=数字；
document.getElementById（“squares”）.innerHTML=number；
}
document.getElementById（“squares”）.innerHTML=number；
标题{
文本对齐：居中；
背景色：红色；
}
h{
文本allign：中心；
}

您想尝试打包多少个方块？


1.
2.
3.
4.
5.
6.
7.
8.
9
10 --->
提交




函数绘图（）{
h='标题{背景色：白色；}h{可见性：隐藏}'；
document.getElementById（“h”）.innerHTML=h；
如果（平方=1）{
x=x；
document.getElementById（“x”）.innerHTML=x；
}else如果（平方==2）{
x=x+“”+x
document.getElementById（“x”）.innerHTML=x；
}else if（平方=3）{
x=x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}else如果（平方==4）{
x=x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}否则如果（平方==5）{
x=x+“”+x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}否则如果（平方==6）{
x=x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}else if（平方=7）{
x=x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}否则如果（平方==8）{
x=x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}else if（平方=9）{
x=x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}否则如果（平方==10）{
x=x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x+“”+x；
document.getElementById（“x”）.innerHTML=x；
}
}
document.getElementById（“x”）.innerHTML=x；
document.getElementById（“h”）.innerHTML=h；

p{
可见性：隐藏

我可能会尝试使用其中一个库，如Raphael、Snap、SVG.js，它们已经完成了拖动和旋转等变换。我可能会尝试使用其中一个库，如Raphael、Snap、SVG.js，它们已经完成了拖动和旋转等变换。