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

Question

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

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

这是我的: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%"
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="400" height="1900">
  <rect x="100" y="100" width="200" height="200" fill="red"/>
  <rect x="100" y="400" width="200" height="200" fill="orange"/>
  <rect x="100" y="700" width="200" height="200" fill="yellow"/>
  <rect x="100" y="1000" width="200" height="200" fill="green"/>
  <rect x="100" y="1300" width="200" height="200" fill="blue"/>
  <rect x="100" y="1600" width="200" height="200" fill="violet"/>
</svg>