Question

我决定使用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方法应用于它们中的每一个，但我得到一个错误，说该对象没有animate方法。那么我应该将animate方法绑定到哪个对象？

这是我尝试的最后一件事

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

Answer 1

svg.import.js插件已更新。现在，所有导入的元素都在import（）方法返回的对象中引用，如mentioned here：

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');

Answer 2

我正在阅读文档，这对我来说并不清楚。但是你不能在this.SVG对象中添加id属性，然后通过标准DOM方法访问svg元素吗？或者您是否正在尝试检索js对象本身？那不就是你所说的var，或者为时已晚？

Answer 3

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

var draw = svg('paper');
draw.import('... svg data ... ');
draw.children().forEach(function(element) {
  console.log(element.attr('id');
});

但是如果你想单独引用元素，最好单独创建它们，而不是导入庞大的SVG文档。假设你想使用在Inkscape中生成的路径，只需创建单个形状并将其保存为普通的svg。打开svg文件，找到<path>标记并复制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);

动画导入的SVG对象

3 个答案: