使用 Snap.svg 的基本旋转

Question

我试图在 svg 平移时旋转它，但我无法使其绕轴旋转。有没有办法让它绕自己的轴旋转？

js代码

var paper = Snap('#svg');
matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});
start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce);

Answer 1

看到这个demo，我用了TimelineMax.js lib。它超级简单，对动画很有帮助！

HTML代码：

<svg id="svg" width="80vw" height="60vh" viewBox="0 0 1300 250">
<path class="myPath" d="M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z"></path>

JS代码：

/*
var paper = Snap('#svg');

matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});

start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce); */



var tl = new TimelineMax();

// Settings ...

tl.set(".myPath", {
    x: 630,
    y: -95,
    fill: "#e8434d",
    transformOrigin: "center"
})

// Animatiion ...

tl.to(".myPath", 3 , { 
    //x : "+= 500",
    y: "+= 400",
    rotation: "630",
    ease: Bounce.easeOut
});

Answer 2

如果您不包括自己的旋转中心，Snap 将使用其计算出的边界框中心进行旋转。所以它就像删除它一样简单。

start_gear.animate({ transform: 't630, 240 r540' }, 3000, mina.bounce);

jsfiddle

如果您只想旋转，并且元素已经应用了变换，则需要包括之前的变换，这样它就不会被覆盖。要获得之前的转换，只需 element.transform() 即可。所以完整的命令是...

start_gear.animate({ transform: start_gear.transform() + 'r540' }, 3000, mina.bounce);

jsfiddle

使用 Snap.svg 的基本旋转

Basic rotation using Snap.svg

javascript

css

svg

snap.svg