如何使用jQuery/Javascript旋转单个SVG元素？

我有一个重复矩形形状的SVG。滚动时，每个矩形应单独旋转。 我遇到的问题是，整个SVG块都在旋转，而不是单独旋转

是否可以针对脚本将每个矩形视为要旋转的单个元素

这是我的：

下面是我在某处找到的一个旋转解决方案，但它会影响整个SVG：

$(function() {

  var sdegree = 0;

  $(window).scroll(function() {

  sdegree ++ ;
  sdegree = sdegree + 2 ;
  var srotate = "rotate(" + sdegree + "deg)";
  $("rect").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
  });

});

---

矩形都围绕页面原点（左上角）旋转。如果希望它们围绕自己的中心旋转，则需要在CSS规则中包含一个

变换原点

$（函数（）{
var sdegree=0；
$（窗口）。滚动（函数（）{
sdegree++；
sdegree=sdegree+2；
var srotate=“旋转（“+sdegree+”deg）”；
$（“rect”）.css({
“-webkit转换”：srotate，
“变换”：旋转，
“-webkit转换源”：“50%50%”，
“转换原点”：“50%50%”
});
});
});
如果您关心在Firefox中运行这个问题，请查看这个非常恼人的bug（祝您好运）：