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

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

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

这是我的： JSFiddle

这是我在某处找到的旋转解决方案，但它会影响整个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}); }); }); 

Answer 1

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

 $(function() { var sdegree = 0; $(window).scroll(function() { sdegree ++ ; sdegree = sdegree + 2 ; var srotate = "rotate(" + sdegree + "deg)"; $("rect").css({ "-webkit-transform" : srotate, "transform" : srotate, "-webkit-transform-origin" : "50% 50%", "transform-origin" : "50% 50%" }); }); });