jQuery 动画 SVG 元素

Question

jQuery 动画 SVG 元素

11

我在应用程序中使用了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);
});

我尝试了这个，但它没有起作用...

- ramesh

1

如果页面的DOCTYPE不是HTML5，请注意ID必须以字母开头。 - Ram

谢谢回复。我的 DOCTYPE 是 <!DOCTYPE html><html> <head> 我也把名称改成了 "dice"。但是不起作用...即使 $('#dice').hide(); 这个可以工作... 请帮忙。 - ramesh

$('#dice').hide(); -- 这个可以工作... 但动画效果不起作用。 - ramesh

哦，抱歉...我不是伊朗人...我是印度人。 - ramesh

1

没关系，很酷，我们在波斯也有 Ramesh，这是一个美丽的名字 :) - Ram

2个回答

7

jQuery动画是用于动画HTML元素的。对于SVG，您需要尝试jQuery SVG插件。请访问链接 - http://keith-wood.name/svg.html

- Arjun Raj

2

更准确地说，jQuery animate 用于动画化 CSS 属性。一些 CSS 可以应用于 SVG 元素，例如不透明度、填充和描边等。请参阅此文章了解详细说明。 - Sygmoral

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sygmoral · Accepted Answer

不需要使用插件，但需要用一个技巧。问题是x不是 CSS 属性而是属性，jQuery.animate 只能对 CSS 属性进行动画处理。但你可以使用 step 参数来指定自定义的动画行为。

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

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