如何旋转单独的SVG元素与jQuery / Javascript？ [英] How to rotate individual SVG elements with jQuery/Javascript?

问题描述

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

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

my： 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}）; 
}）; 
 
}）; 
  

解决方案

矩形都围绕页面的原点旋转（左上）。如果你希望他们绕自己的中心旋转，那么你需要在你的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％ -origin：50％50％}）;}）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< svg width =400height =1900> < rect x =100y =100width =200height =200fill =red/> < rect x =100y =400width =200height =200fill =orange/> < rect x =100y =700width =200height =200fill =yellow/> < rect x =100y =1000width =200height =200fill =green/> < rect x =100y =1300width =200height =200fill =blue/> < rect x =100y =1600width =200height =200fill =violet/>< / svg>  

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});
  });

});

解决方案

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>

这篇关于如何旋转单独的SVG元素与jQuery / Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！