Question

我有一个重复的矩形形状的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%"
    });
  });

});

<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>

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

1 个答案: