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

【问题标题】：Rotate SVG and keep children elements in their places旋转 SVG 并将子元素保留在其位置
【发布时间】：2018-08-24 12:12:53
【问题描述】：

我需要旋转滚轮并保持图标在它们的位置稳定（见附图）

以下是我编写的一些代码，但它的工作方式与预期不符。我使用 SnapSVG 插件（但没关系）。

const pie = Snap('#pie-svg');
const pies = pie.selectAll('.pie');
const icons = pie.selectAll('.icon');

const ROTATIONS = {
    'pie-1': 180,
    'pie-2': 120,
    'pie-3': 60,
    'pie-4': 0,
    'pie-5': -60,
    'pie-6': -120,
};

function pieClickHandler(e) {
    const id = this.attr('id');
    // const pieCoords = pie.getBBox();

    pie.animate({
       transform: `r${ROTATIONS[id]},0,0`
    }, 3000, mina.easeout);

    icons.forEach((icon) => {
        const iconCoords = icon.getBBox();

        icon.animate({
            transform: `r${-1 * ROTATIONS[id]},${iconCoords.cx},${iconCoords.cy}`
        }, 3000, mina.easeout);
    });
}

pies.forEach(function (pie) {
    pie.click(pieClickHandler);
});

【问题讨论】：

请提供包含您的 SVG 的完整示例（例如在 JSFiddle 上）。

标签： javascript animation svg snap.svg

【解决方案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>

【讨论】：

我需要用滚轮旋转图标，但要保持水平对齐

【解决方案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% 方向正确方面可能并不总是很准确。

【讨论】：