为导入的SVG对象设置动画

我决定使用svg.js而不是raphael.js，因为我只需要为svg图像提供简单的动画功能，而且它的尺寸更小，语法也很好

我已经成功地导入了SVG，但是我无法确定应该引用哪个对象来设置它的动画

导入后的最后一段代码是

var rawSvg = 'svg raw data here'
var draw = svg('paper').size('100%', '100%');
    draw.import(rawSvg);

我检查了Google Chrome中的元素，我所能看到的只有SVG对象“g”、“path1layer1和Path2993。因此，我尝试将动画方法应用于其中的每一个对象，但我得到一个错误，即该对象没有动画方法。那么，我应该将animate方法绑定到哪个对象

这是我最后一次尝试

path2993.animate().move(150, 150);

---

我在看文件，我不清楚。但是您不能向

this.SVG

对象添加一个id属性，然后通过标准DOM方法访问SVG元素吗？或者您正在尝试检索js对象本身？这不是你称之为draw-on的var吗，还是说太晚了

导入插件非常年轻。所有导入的元素实际上都是使用构建的，因此它们都使用children（）方法在中公开：

但是，如果您想单独引用元素，最好单独创建它们，而不是导入一个巨大的SVG文档。假设您想要使用在Inkscape中生成的路径，只需创建单个形状并将其保存为普通svg。打开svg文件，找到

标记并复制

d=“…”

属性的内容，该属性可能如下所示：

M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z

然后可以创建路径并设置其动画：

var pathData = 'M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z';
var draw = svg('paper');
var path = draw.path(pathData).size(30).move(10,10);
path.animate().move(100,100);

插件已经更新。现在，import（）方法返回的对象中引用了所有导入的元素，如下所示：

var-rawSvg=''；
var draw=svg（“纸张”）；
var store=draw.import（rawSvg）；
store.polygon1238.fill（“#f06”）；

我真的不知道。我很高兴能够访问SVG对象，我不需要访问JS对象，因为我只想在DOM中操作SVG。我到底应该在哪里添加ID属性？我一直在检查DOM属性，ID显示为path2993，所以奇怪的是为什么这不起作用。我使用Raphael.js做了同样的事情，只提供了路径名，效果很好。您可以使用：SVG.get（'element_id'）获得一个元素，所以我更新了库，现在我的代码看起来像是var draw=SVG（'paper'）。size（'100%，'100%'）；var store=draw.import（rawSvg）；那应该有用是吗？尽管我仍然得到“objecthasnowmethodanimate”store.animate（）.move（150150）；这是因为“store”是一个包含导入元素的对象。您应该能够像这样将它们作为目标：store.polygon1238.animate（200.fill）（“#f06”）；

var pathData = 'M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z';
var draw = svg('paper');
var path = draw.path(pathData).size(30).move(10,10);
path.animate().move(100,100);

var rawSvg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"    width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><line id="line1234" fill="none" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="138.682" y1="250" x2="293.248" y2="95.433"/><rect id="rect1235" x="22.48" y="19.078" fill="#F7931E" stroke="#C1272D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="94.972" height="94.972"/><path id="path1236" opacity="0.5" fill="#29ABE2" d="M189.519,131.983c0,5.523-4.477,10-10,10H92.257c-5.523,0-10-4.477-10-10V53.659 c0-5.523,4.477-10,10-10h87.262c5.523,0,10,4.477,10,10V131.983z"/><circle id="circle1237" opacity="0.8" fill="#8CC63F" cx="201.603" cy="159.508" r="69.067"/><polygon id="polygon1238" fill="none" stroke="#8C6239" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="286.331,287.025  227.883,271.365 212.221,212.915 255.009,170.127 313.459,185.789 329.119,244.237 "/></svg>';
var draw = svg('paper');
var store = draw.import(rawSvg);
store.polygon1238.fill('#f06');