jQuery 动画 SVG 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11789665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate SVG element
提问by ramesh
I got a svg in my application. Like
我的应用程序中有一个 svg。喜欢
<svg id="gt" height="450" width="300" xmlns="http://www.w3.org/2000/svg">
<image id="1_dice" x="0" y="420" height="30" width="30" xlink:href="images/1_coin.png" />
</svg>
I got a svg element named '1_dice'. In a HTML button click I would likes to animate the element according to the parameters. Like
我有一个名为“1_dice”的 svg 元素。在 HTML 按钮中单击我想根据参数为元素设置动画。喜欢
$('#btn').click(function(){
$('#1_dice').animate({'x':200},2000);
});
I tried this but this doesn't working ...
我试过了，但这不起作用......
采纳答案by Arjun Raj
jQuery animate is for animating HTML elements. For SVG you have to try jQuery SVGplugin. Please follow the link - http://keith-wood.name/svg.html
jQuery animate 用于动画 HTML 元素。对于 SVG，您必须尝试jQuery SVG插件。请按照链接 - http://keith-wood.name/svg.html
回答by Sygmoral
It is possible without a plugin, but it involves a trick then. The issue is that xis not a css property but an attribute, and jQuery.animateonly animates css properties. But you can use the stepparameter to specify your own custom behavior for the animation.
没有插件是可能的，但它涉及一个技巧。问题是这x不是一个 css 属性，而是一个属性，而jQuery.animate只为 css 属性设置动画。但是您可以使用该step参数为动画指定您自己的自定义行为。
foois a non-existing property whose animating value we use in the step function.
foo是一个不存在的属性，我们在 step 函数中使用其动画值。
$('#btn').click(function(){
$('#dice_1').animate(
{'foo':200},
{
step: function(foo){
$(this).attr('x', foo);
},
duration: 2000
}
);
});
