使用JavaScript（而不是CSS）旋转svg行

我有以下svg行：

<svg height="100%" width="100%">
    <line id="skyline" x1="50%" y1="50%" x2="50%" y2="90%" style="stroke:rgb(0,0,0);stroke-width:10" />
</svg>

尝试多次旋转直线似乎会向“变换”属性添加许多旋转（X），而不是每次都覆盖该值：

var skyline = document.getElementById("skyline");

for (i = 0; i < 100; i++) {
    var rotation = skyline.getAttribute("transform") + i;
    skyline.setAttribute("transform", "rotate(" + rotation + ")");
}

var skyline=document.getElementById（“skyline”）；
对于（i=0；i<100；i++）{
var rotation=skyline.getAttribute（“转换”）+i；
setAttribute（“变换”、“旋转”（+旋转+））；
}

---

如何正确获取旋转属性，以及如何多次正确覆盖？

假设您的行没有

变换，您可以执行以下操作：

var skyline = document.getElementById("skyline");

for (i = 0; i < 100; i++) {
    skyline.setAttribute("transform", "rotate(" + i + ")");
}

如果您的元素可能已经有了变换，那么您需要获取当前变换并对其进行操作。例如：

var i = 0;

function rotate() {
  var matrixList = skyline.transform.baseVal;
  if (matrixList.length === 0) {
    skyline.setAttribute("transform", "rotate(" + (i++) + ")");
  } else {
    var firstTransform = matrixList.getItem(0);
    firstTransform.setMatrix(firstTransform.matrix.rotate(1));
    i++;
  }
  if (i < 100)
    setTimeout(rotate, 100);
}

setTimeout(rotate, 100);

var i=0；
函数rotate（）{
var matrixList=skyline.transform.baseVal；
if（matrixList.length==0）{
setAttribute（“变换”、“旋转”（+（i++）+”）；
}否则{
var firstTransform=matrixList.getItem（0）；
setMatrix（firstTransform.matrix.rotate（1））；
i++；
}
如果（i<100）
设置超时（旋转，100）；
}
设置超时（旋转，100）；


var skyline=document.getElementById（“skyline”）；
var i=0；
函数rotate（）{
var matrixList=skyline.transform.baseVal；
if（matrixList.length==0）{
setAttribute（“变换”、“旋转”（+（i++）+”）；
}否则{
var firstTransform=matrixList.getItem（0）；
setMatrix（firstTransform.matrix.rotate（1））；
i++；
}
如果（i<100）
设置超时（旋转，100）；
}
设置超时（旋转，100）
假设您的线路尚未进行
转换
，您只需执行以下操作：

var skyline = document.getElementById("skyline");

for (i = 0; i < 100; i++) {
    skyline.setAttribute("transform", "rotate(" + i + ")");
}

如果您的元素可能已经有了变换，那么您需要获取当前变换并对其进行操作。例如：

var i = 0;

function rotate() {
  var matrixList = skyline.transform.baseVal;
  if (matrixList.length === 0) {
    skyline.setAttribute("transform", "rotate(" + (i++) + ")");
  } else {
    var firstTransform = matrixList.getItem(0);
    firstTransform.setMatrix(firstTransform.matrix.rotate(1));
    i++;
  }
  if (i < 100)
    setTimeout(rotate, 100);
}

setTimeout(rotate, 100);

var i=0；
函数rotate（）{
var matrixList=skyline.transform.baseVal；
if（matrixList.length==0）{
setAttribute（“变换”、“旋转”（+（i++）+”）；
}否则{
var firstTransform=matrixList.getItem（0）；
setMatrix（firstTransform.matrix.rotate（1））；
i++；
}
如果（i<100）
设置超时（旋转，100）；
}
设置超时（旋转，100）；


var skyline=document.getElementById（“skyline”）；
var i=0；
函数rotate（）{
var matrixList=skyline.transform.baseVal；
if（matrixList.length==0）{
setAttribute（“变换”、“旋转”（+（i++）+”）；
}否则{
var firstTransform=matrixList.getItem（0）；
setMatrix（firstTransform.matrix.rotate（1））；
i++；
}
如果（i<100）
设置超时（旋转，100）；
}
设置超时（旋转，100）
在同步循环中更改相同的属性没有意义。如果你想要某种动画，你需要引入时间延迟。最直接的方法是使用
setTimeout

var skyline = document.getElementById("skyline");

var angle = getOriginalAngle(),
    finalAngle = angle + 100;

function rotate() {
   skyline.setAttribute("transform", "rotate(" + (angle++) + "deg)");
   (angle < finalAngle) && setTimeout(rotate, 12); // repeat every 12 ms
}

rotate(); // launch animation

在同步循环中更改相同的属性没有意义。如果你想要某种动画，你需要引入时间延迟。最直接的方法是使用
setTimeout

var skyline = document.getElementById("skyline");

var angle = getOriginalAngle(),
    finalAngle = angle + 100;

function rotate() {
   skyline.setAttribute("transform", "rotate(" + (angle++) + "deg)");
   (angle < finalAngle) && setTimeout(rotate, 12); // repeat every 12 ms
}

rotate(); // launch animation

使用：


函数getRotate（el）{
var st=window.getComputedStyle（el，null）；
var tr=st.getPropertyValue（“-webkit transform”）||
st.getPropertyValue（“-moz转换”）||
st.getPropertyValue（“-ms转换”）||
st.getPropertyValue（“-o-transform”）||
st.getPropertyValue（“转换”）||
“失败……”；
var值=tr.split（'（'）[1]；
values=values.split（'））[0]；
values=values.split（'，'）；
var a=数值[0]；
var b=数值[1]；
var c=数值[2]；
var d=数值[3]；
var scale=Math.sqrt（a*a+b*b）；
//圆弧正弦，从弧度转换为度，圆形
var sin=b/标度；
//下一行工作30度，但不是130度（返回50度）；
//变量角度=数学圆（数学asin（sin）*（180/数学PI））；
变量角度=数学圆（数学atan2（b，a）*（180/数学PI））；
返回角
}
设置间隔（旋转，100）；
函数rotate（）{
var rotation=getRotate（document.getElementById（“skyline”）+5；
控制台日志（旋转）；
setAttribute（“样式”、“笔划：rgb（255,0,0）；笔划宽度：2；变换：旋转（“+旋转+”度）；变换原点：中心”）；
}

使用：


函数getRotate（el）{
var st=window.getComputedStyle（el，null）；
var tr=st.getPropertyValue（“-webkit transform”）||
st.getPropertyValue（“-moz转换”）||
st.getPropertyValue（“-ms转换”）||
st.getPropertyValue（“-o-transform”）||
st.getPropertyValue（“转换”）||
“失败……”；
var值=tr.split（'（'）[1]；
values=values.split（'））[0]；
values=values.split（'，'）；
var a=数值[0]；
var b=数值[1]；
var c=数值[2]；
var d=数值[3]；
var scale=Math.sqrt（a*a+b*b）；
//圆弧正弦，从弧度转换为度，圆形
var sin=b/标度；
//下一行工作30度，但不是130度（返回50度）；
//变量角度=数学圆（数学asin（sin）*（180/数学PI））；
变量角度=数学圆（数学atan2（b，a）*（180/数学PI））；
返回角
}
设置间隔（旋转，100）；
函数rotate（）{
var rotation=getRotate（document.getElementById（“skyline”）+5；
控制台日志（旋转）；
setAttribute（“样式”、“笔划：rgb（255,0,0）；笔划宽度：2；变换：旋转（“+旋转+”度）；变换原点：中心”）；
}
Greensock是CSS和JS的一个很好的扩展，它允许您根据所讨论元素的id或类名来操作SVG：


下面是一个例子：




TweenMax.staggeto（'.skyline'，2，{rotation:-90，repeat:-1，yoyo:true}）
Greensock是CSS和JS的一个很好的扩展，它允许您根据所讨论元素的id或类名来操作SVG：


下面是一个例子：




TweenMax.staggeto（'.skyline'，2，{旋转：-90，重复：-1