1

我正在使用 Snap.svg 来制作这个动画。基本上，我想围绕一个点旋转一个元素，但我希望元素在旋转时仍然面向相同的方向。请检查这个http://jsfiddle.net/mabotofu/MpEu4/6/ 

<svg id="test">
  <circle transform="translate(200,200)" r="10" fill="transparent" stroke="#aaa" />
  <g>
    <circle cx="0" cy="50" r="10" />
    <circle cx="0" cy="150" r="10" />
    <text x="0" y="100" fill="red">TEST</text>
  </g>
</svg>

var paper = Snap(test),
container = paper.select("g");

container
    .attr({
        fill: "transparent",
        stroke: "#aaa",
        transform: "translate(200,200)"
    })
    .animate({
        transform: "t200,200r720,0,0"
    }, 6000);

在此示例中，我需要“TEST”文本即使在旋转时仍保持水平。toransform="rotate()" 已应用于元素，因此我不能在元素上再次使用旋转，但我不知道如何围绕中心点旋转然后旋转文本本身使其保持水平。请帮忙！谢谢

4

1 回答 1

2

您可以将相反方向的旋转应用于文本元素：

...
container = paper.select("g");
text = container.select("text");
...
text.animate({transform: "t0,0r-720"}, 6000);

请参阅：JSFiddle

于 2014-03-08T04:08:47.333 回答