Question

我看过很多关于snap.svg的博客文章，都讨论了如何绘制和制作动画。没有关于动画现有svg的信息。

如何为现有的svg制作动画？我如何将其包含在页面中？

我可以使用或是否需要使用

有没有人有一个使用现有svg和动画的例子？

请注意，我不想在页面中包含svg源代码，而是链接到文件本身。

Answer 1

首先，您无法为svg 图像设置动画，因此如果您尝试动画svg img标记，它将无效。

使用svg文件的主要2个选项（如果你不能包括内联，通常很好）

1）通过javascript加载svg，插入DOM并设置动画

2）拥有指向对象标签的HTML链接并引用（作为对象标签具有DOM，因此可以进行动画处理）

方法 1）（在svg文件中加载，添加到现有的基本svg元素或创建一个）

var s = Snap('#mySvg');

var tux = Snap.load("Dreaming_tux.svg", function ( loadedFragment ) {
               s.append( loadedFragment );
               s.hover( hoverover, hoverout );
               otherAnimationFuncstuff();
} );

// add hover funcs, all DOM selections will now work. Make sure selects happen 
// AFTER the load callback has finished
// Note, a base SVG element must exist, or you can add one with Snap(width,height)

example

方法2）（引用对象标签）

//html
<object id="svgobject" data="Dreaming_Tux.svg"></object>

我们使用 contentDocument

引用对象文档

var mySvg = document.getElementById("svgobject").contentDocument.getElementById("tux");

我们'Snapify'对象，即创建一个可以访问它的快照变量。

var s = Snap( mySvg );

然后我们可以通过从中选择一些元素来为它设置动画，例如

var g = s.select("#g30")
         .animate({ transform: 'r360,150,150s1.3' }, 1000, mina.bounce );

example

我不是对象方法2的粉丝，因为我认为它可能更容易出现跨浏览器的不一致，我怀疑性能可能不太好，但我可能错了。

我倾向于认为包含内联源（您不想要，但不确定原因）更为优化，或者将其作为示例1拉入。

使用快照

1 个答案: