Question

我正在尝试使用SVG.js设置路径动画，但它会一直显示此错误：

未捕获的TypeError：对象m774.042297,414.434357c-4.302734,0 -9.586304，-3.046783 -11.741272，-6.771179l-15.146057，-26.174835c-2.154968，-3.724365 -2.154968，-9.817963 0，-13.542328l15.146057，-26.174835c2.154968，-3.724396 7.438538，-6.771179 11.741272，-...... t'

这是我的jsfiddle： http://jsfiddle.net/jaZ3C/

HTML

<div id="drawing"></div>

的Javascript

    var draw = SVG('drawing').viewbox(0, 0, 1600, 706);

var hexagon = draw.path('m789.13208,375.361206c-0.019592,0 -0.04364,-0.013855 -0.053406,-0.030792l-0.068848,-0.119019c-0.009827,-0.016937 -0.009827,-0.044647 0,-0.061584l0.068848,-0.119019c0.009766,-0.016937 0.033813,-0.030792 0.053406,-0.030792l0.137817,0c0.019592,0 0.04364,0.013855 0.053406,0.030792l0.068848,0.119019c0.009827,0.016937 0.009827,0.044647 0,0.061584l-0.068848,0.119019c-0.009766,0.016937 -0.033813,0.030792 -0.053406,0.030792l-0.137817,0z')
    .fill('#000');
hexagon.animate(500, '<>', 0).plot('m774.042297,414.434357c-4.302734,0 -9.586304,-3.046783 -11.741272,-6.771179l-15.146057,-26.174835c-2.154968,-3.724365 -2.154968,-9.817963 0,-13.542328l15.146057,-26.174835c2.154968,-3.724396 7.438538,-6.771179 11.741272,-6.771179l30.317444,0c4.302673,0 9.586243,3.046783 11.741211,6.771179l15.146057,26.174835c2.154968,3.724365 2.154968,9.817963 0,13.542328l-15.146057,26.174835c-2.154968,3.724396 -7.438538,6.771179 -11.741211,6.771179l-30.317444,0z');

有人可以帮我指出这里有什么问题吗？

Answer 1

目前无法在svg.js中变换路径。这是将来出现的一项功能。如何为其他属性设置动画，请参阅https://github.com/wout/svg.js#animatable-method-chain了解可用的方法。

在SVG.js中你可以变换pointArrays（很快就会有pathArrays）。有关详细信息，请参阅https://github.com/wout/svg.js#morph-2。

我修复了你的jsfiddle所以它有效，除了＆＃34; animate＆＃34;部分。如果我理解了你的问题，请告诉我。其中有小问题。首先，jsfiddle中的长字符串似乎存在一些问题，所以我不得不拆分它。然后实际路径非常小，请注意svg是300px乘300px，使用的视口只有1px乘1px，即放大300倍。此外，您包含svg.js（作为外部文件）的方式，您应该从＆＃34;框架＆amp;中选择svg.js。扩展＆＃34;

http://jsfiddle.net/jaZ3C/1/

var draw = SVG('drawing').size(300, 300).viewbox(789, 375, 1, 1);

var str = 'm789.13208,375.361206' +
    'c-0.019592,0 -0.04364,-0.013855 -0.053406,-0.030792' +
    'l-0.068848,-0.119019' +
    'c-0.009827,-0.016937 -0.009827,-0.044647 0,-0.061584' +
    'l0.068848,-0.119019' +
    'c0.009766,-0.016937 0.033813,-0.030792 0.053406,-0.030792' +
    'l0.137817,0' +
    'c0.019592,0 0.04364,0.013855 0.053406,0.030792' +
    'l0.068848,0.119019' +
    'c0.009827,0.016937 0.009827,0.044647 0,0.061584' +
    'l-0.068848,0.119019' +
    'c-0.009766,0.016937 -0.033813,0.030792 -0.053406,0.030792' +
    'l-0.137817,0' +
    'z';

var hexagon = draw.path(str).fill('#000');

Answer 2

这是一个老问题，但仅仅是因为他记录：你现在可以使用svg.js为路径制作动画。只需使用svg.pathmorphing.js扩展程序

即可

编辑：简单的动画（当所有路径命令来自同一类型时）是在核心中实现的事件

动画路径图上的SVG.js错误

2 个答案: