jquery - jQuery 动画 SVG 元素

Question

我的应用程序中有一个 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>

我有一个名为“1_dice”的 svg 元素。在 HTML 按钮中单击我想根据参数为元素设置动画。像

$('#btn').click(function(){
     $('#1_dice').animate({'x':200},2000);
});

我试过这个，但这不起作用......

Answer 1

没有插件是可能的，但它涉及一个技巧。问题是这x不是一个 css 属性而是一个属性，而jQuery.animate只为 css 属性设置动画。但是您可以使用该step参数为动画指定您自己的自定义行为。

foo是一个不存在的属性，我们可以在阶跃函数中使用它的动画值。

$('#btn').click(function(){
    const $image = $('#dice_1');
    $image.animate(
        { 'foo': 200 },
        {
          step: (foo) => $image.attr('x', foo),
          duration: 2000
        }
    );
});

Answer 2

jQuery animate 用于动画 HTML 元素。对于 SVG，你必须尝试jQuery SVG插件。请点击链接 - http://keith-wood.name/svg.html