【问题标题】：How to rotate individual SVG elements with jQuery/Javascript?如何使用 jQuery/Javascript 旋转单个 SVG 元素？
【发布时间】：2015-08-25 22:07:07
【问题描述】：
我有一个带有重复矩形形状的 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});
});
});
【问题讨论】：
标签：
javascript
jquery
html
css
svg
【解决方案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>