【问题标题】:Trigger a second SVG SMIL animation on hover of the first在第一个悬停时触发第二个 SVG SMIL 动画
【发布时间】:2015-12-23 01:13:58
【问题描述】:

当您将鼠标悬停在另一个 SMIL 动画上时,我试图触发第二个 SMIL 动画。

第一个动画运行良好,第二个动画也运行良好,当它有自己的悬停/单击触发器时,但是当我尝试用

连接两者时
begin="pin-anime.begin + 1s" 

在第一次动画运行时。

任何想法我在这里缺少什么?

JSFiddle of what i have so far

【问题讨论】:

    标签: animation svg smil


    【解决方案1】:

    您有几个单独的错误。

    • 您的动画元素没有 id 值。看起来您输入了错误的 d 而不是 id 但无论如何所有 id 值都必须是唯一的。

    • 您的动画元素有一个带有减号的 id。这被解释为无效的时间偏移。您可以使用不带减号的 ID,也可以使用 \ 转义减号,如 begin="pin\-anim.begin + 1s"

    This 似乎更接近您想要实现的目标。

    【讨论】:

    • 感谢您的帮助。您所做的更改对启动第二个路径动画没有影响。
    • 你在使用什么 UA,因为小提琴在 Firefox 上对我有用。如果我将鼠标放在顶部形状上,底部形状会在 1 秒后开始跳动。这不是你想要的吗?
    • 是的,你是对的。我在 Chrome 中打开了它。奇怪的是它在 Chrome 中不起作用。我认为唯一不支持 SMIL 的浏览器是 IE 和 Opera。
    • 可能是 Chrome 实现中的一个错误。如今,Chome 和 Opera 拥有相同的平台,因此它们将拥有相同的 SMIL 支持。
    • 噩梦。感谢您的帮助罗伯特。
    猜你喜欢
    • 1970-01-01
    • 2017-06-10
    • 1970-01-01
    • 2012-08-01
    • 2020-09-29
    • 2013-07-16
    • 1970-01-01
    • 1970-01-01
    • 2014-11-16
    相关资源
    最近更新 更多