jQuery 动画 SVG 元素

Posted 2023-05-08

【中文标题】jQuery 动画 SVG 元素

【英文标题】：jQuery animate SVG element

【发布时间】：2012-08-01 03:28:19

【问题描述】：

我的应用程序中有一个 svg。喜欢

<svg id="gt"   xmlns="http://www.w3.org/2000/svg">
<image id="1_dice" x="0" y="420"   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，美丽的名字:)

【参考方案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。