旋转SVG并将子元素保留在其位置

Question

我需要旋转滚轮并使图标在其位置保持稳定（请参阅附图）

下面是我编写的一些代码，但它的工作方式并不像预期的那样。 我使用SnapSVG插件（但没关系）。

Topology snapshot [ver=1, servers=1, clients=0, CPUs=8, heap=3.5GB]

Answer 1

我处理这个问题的方法是实际上没有图标是轮子的孩子，而是让轮子和包含图标的div都是绝对定位的孩子在另一个div中。这样，它们就是可以相互重叠的兄弟姐妹，而轮子的旋转不会影响图标。

<div id="wheel-container">
    <div id="wheel"></div>
    <div id="icon-container">
        <div class="icons" id="icon1"></div>
        <div class="icons" id="icon2"></div>
        <div class="icons" id="icon3"></div>
        <div class="icons" id="icon4"></div>
        <div class="icons" id="icon5"></div>
        <div class="icons" id="icon6"></div>
    </div>
</div>

Answer 2

您可以这样做的一种方法是为每个图标创建一个隐藏的小点。将其添加到旋转的组/滚轮。

然后旋转它时，抓住点的位置，然后将图标移动到该点。

所以我们设置了我们的轮子和图标以及隐藏的点......

var c = s.circle(300,300,150).attr({ fill: 'yellow' });
var icon1Position = s.rect(0,0,2,2).transform('t400,350');
var g = s.group();
g.append(icon1Position,c)

var icon1 = s.rect(0,0,iconWidth,iconHeight).attr({ fill: 'red' });

然后我们动画。我们使用Snap animate的函数版本，在每个动画步骤中调用func。

我们旋转车轮。然后我们使用globalMatrix来分析小矩形的位置。然后我们将图标中心转换为该位置（因此调整宽度/中心的一半）。

Snap.animate(0,180, function( val ) { 

  g.attr({ transform: 'r' + val + ',300,300' });
  var newLoc = icon1Position.transform().globalMatrix.split(); 
  icon1.transform( 't' + (newLoc.dx-iconWidth/2) + ',' + (newLoc.dy-iconHeight/2) );

}, 2000 );

Example jsfiddle只需要扩展到数组或任何你想要的东西，就可以使用多个图标。

另一种方法是相对于车轮旋转反向旋转每个图标，但感觉稍微笨拙，并且在100％定向正确方面可能并不总是非常精确。