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

Question

I have a SVG with repeated rectangle shapes. On scroll, each rectangle should individually rotate. The problem I'm having is that the entire SVG block rotates, and not individually.

Is it possible to target the script to treat each rectangle as an individual element to rotate?

Here is my: JSFiddle

Here is a rotation solution I found somewhere, but it affects the entire 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

The rectangles are all rotating around the origin of the page (the top left). If you want them to rotate about their own centres, then you will need to include a transform-origin in your CSS rule.

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