Question

我有一个HTML页面，里面有一个<svg>元素。加载时，动态添加矩形。每个<rect>都会注册到我正在轮换它的onclick事件中。

我的问题是我希望<rect>在他们的中心点上旋转，而不是在他们坐在里面的SVG元素的左上角。我怎么能实现这个目标呢？

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Demo</title>   
<script lang="javascript" src="HTML5-Script.js"></script>
</head>
<body>
<svg onload="DrawRects()" id="SVG" width="800" height="600"></svg>
</body>
</html>

我的脚本代码：

function DrawRects() {
    setInterval(function () { CreateRect(); }, 2000);
}

function CreateRect() {
    var svg = document.getElementById("SVG");
    var svgns = "http://www.w3.org/2000/svg";
    var shape = document.createElementNS(svgns, "rect");
    shape.setAttributeNS(null, "x", Math.floor((Math.random() * 200) + 10));
    shape.setAttributeNS(null, "y", Math.floor((Math.random() * 200) + 10));
    shape.setAttributeNS(null, "width", Math.floor((Math.random() * 400) + 10));
    shape.setAttributeNS(null, "height", Math.floor((Math.random() * 400) + 10));

    var red = Math.floor((Math.random() * 256) + 1);
    var green = Math.floor((Math.random() * 256) + 1);
    var blue = Math.floor((Math.random() * 256) + 1);
    var color = 'rgb(' + red + ',' + green + ',' + blue + ')';

    shape.setAttributeNS(null, "fill", color);
    shape.id = "R" + Math.floor((Math.random() * 50));
    shape.setAttributeNS(null, "onclick", "RectClick(this)");  
    document.getElementById('SVG').appendChild(shape);
}

function RectClick(shape) {
    Rotate(shape,0);    
}

function Rotate(shape,angle) {

    setInterval(function () {
        angle++;
        shape.style.webkitTransform = "rotate(" + angle + "deg)";
       }, 60);
}

Answer 1

您可以使用transform-origin设置CSS transform属性提供的转换的来源。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

元素的旋转动态添加到SVG

1 个答案: