Question

我正在使用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（）”已经应用于元素，所以我不能再使用旋转，但我不知道如何绕中心点旋转然后旋转文本本身，使其保持水平。请帮忙！谢谢

Answer 1

您可以在与文本元素相反的方向上应用旋转：

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

请参阅：JSFiddle

是否可以在一个SVG元素上运行两个不同的动画？

1 个答案: