jQuery 动画 SVG 元素答案

【问题标题】：jQuery animate SVG elementjQuery 动画 SVG 元素
【发布时间】：2012-08-01 03:28:19
【问题描述】：

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

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

【问题讨论】：

如果页面的 DOCTYPE 不是 HTML5，请注意 ID 必须以字母开头。
感谢您的回复。我的 DOCTYPE 是我还将名称更改为 "dice" 。但不工作..甚至 $('#dice').hide();这是工作..请帮助
$('#dice').hide(); -- 这是有效的......但动画不起作用
哦对不起..我不是伊朗人......我是印度人
别担心，很酷，我们在波斯也有 Ramesh，美丽的名字:)

标签： jquery svg jquery-animate jquery-svg

【解决方案1】：

没有插件也是可能的，但它涉及一个技巧。问题是 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
        }
    );
});

【讨论】：

这仅在您要给出的值是数字时才有效，因为 step 函数只需要一个数字。
Ehhh，这样就可以了...谢天谢地 css 有 rgb() css 函数，所以我可以通过这种方式创建一个不断变化的 svg 填充...

【解决方案2】：

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

【讨论】：

更准确地说，jQuery animate 用于动画 CSS 属性。一些 CSS 可以应用于 SVG 元素，例如不透明度、填充、描边。一些解释见this article。