0

我决定使用 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 方法。那么我应该将动画方法绑定到哪个对象？

这是我尝试的最后一件事

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

3 回答 3

1

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

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');
于 2013-02-05T21:46:41.347 回答
0

我正在阅读文档，但我不清楚。但是您不能向this.SVG对象添加一个 id 属性，然后通过标准 DOM 方法访问 svg 元素吗？或者您是否试图检索 js 对象本身？那不是你称之为 draw 的 var，还是为时已晚？

于 2013-02-05T19:06:44.247 回答
0

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);
于 2013-02-05T21:16:33.793 回答