无法获得svg动画

时间:2013-02-02 21:18:50

标签: svg raphael

我使用ReadySetRaphael工具从InkScape导入了一个SVG。我想为svg设置动画,然后将其放入。为了测试目的,我尝试使用animate方法对其进行转换。

我一直错误地说我的对象没有“动画”方法。我检查了其他SO答案,建议我必须克隆对象并设置最终路径,但不确定是否这样做,或者它如何适用于我?

到目前为止,这是我的js代码。

//code created using readysetraphael. Original svg made in inkscape.
var rsr = Raphael('rsr', '744.09448', '1052.3622');

var layer1 = rsr.set();
var path2993 = rsr.path("m 344.93716,348.36218 c 0,0 34.17415,-33.06016 -1.26571,-83.92195 -35.43985,-50.86178 39.23699,-38.14634 6.32855,-91.55121 -32.90844,-53.40487 -50.62837,-36.8748 -50.62837,-36.8748 -9.49282,-0.63577 -8.85996,-0.63577 -8.85996,-0.63577");
path2993.attr({
    id: 'path2993',
    parent: 'layer1',
    fill: 'none',
    stroke: '#cf0000',
    "stroke-width": '2.92',
    "stroke-linecap": 'butt',
    "stroke-linejoin": 'miter',
    "stroke-miterlimit": '4',
    "stroke-opacity": '1',
    "stroke-dasharray": 'none',
    "marker-start": 'none',
    "marker-mid": 'none',
    "marker-end": 'url(#TriangleInL)'
}).data('id', 'path2993');
layer1.attr({
    'id': 'layer1',
    'name': 'layer1'
});

var rsrGroups = [layer1];

//Animate svg
rsr.animate({
    transform: 's2'
}, 2000);

1 个答案:

答案 0 :(得分:1)

您的代码会在纸质对象上进行动画调用。如animate() is a member of Element,呼叫失败。

我假设您正在尝试为特定形状设置动画,例如path2993。只需在相关元素上调用它:

path2993.animate({transform: 's2'}, 2000);