gpt4 book ai didi

javascript - 使用 SMIL 制作 SVG 动画

转载 作者:行者123 更新时间:2023-11-30 06:02:44 25 4
gpt4 key购买 nike

我正在尝试使用 SVG 为视频元素创建 UI。我正在寻找一个简单的解决方案来为控制栏设置动画,当鼠标在其中时(如 YouTube),我想从窗口底部升起。

这是我想做的:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1">
<g id="control_bar" transform="translate(0,360)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseover" from="0,360" to="0,328" dur="350ms" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseout" from="0,328" to="0,360" dur="350ms" fill="freeze"/>
<rect x="0" y="0" width="640" height="32" fill="grey"/>
</g>
</svg>

不幸的是,window.mouseover 没有做任何事情。相反,我创建了一个透明矩形来覆盖整个窗口,并给它一个 id="screen"并使用 begin="screen.mouseover"等。当鼠标在窗口中时,控制栏确实像我想要的那样动画,但不幸的是,screen 阻止了它下面的所有元素获得它们自己的鼠标事件。

我正在寻找最简单的方法来完成此任务,最好只使用标记 (SMIL),因为我想避免使用大量的 JavaScript 或库。

谢谢!

>>>编辑<<< 澄清我想要的是什么:

我想为 HTML5

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com