【发布时间】：2011-08-25 11:31:00
【问题描述】：
我正在尝试使用 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
我目前的解决方案：
我在我的 HTML 文档中放置了一个
<video width="640" src="myvideo.webm"/>
然后我使用以下 JavaScipt（带有 jquery）：
$(function(){
$("video").each(function(){
var old_video = $(this);
var width = old_video.attr("width")
var height = Math.floor(width / (16 / 9))
var video = $("<object/>")
video.addClass("video")
video.css({
width: width,
height: height,
})
var src = old_video.attr("src")
video.attr("data", "video.xhtml#" + src)
old_video.replaceWith(video)
})
})
这会将视频元素替换为
那么video.xhtml的内容是这样的：
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="jquery.js"/>
<script>
$(function(){
$(window).hover(function(){
$("#in")[0].beginElement()
}, function(){
$("#out")[0].beginElement()
})
var video = document.createElement("video")
video.setAttribute("src", location.hash.substr(1))
$("div#video").replaceWith(video)
})
</script>
<style>
svg {
position: absolute;
top: 0; left: 0;
}
video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: black;
}
</style>
</head>
<body>
<div id="video"/>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1">
<g id="bar" transform="translate(0,360)">
<animateTransform id="in" attributeName="transform" attributeType="XML" type="translate" begin="indefinite" from="0,360" to="0,328" dur="50ms" fill="freeze"/>
<animateTransform id="out" attributeName="transform" attributeType="XML" type="translate" begin="indefinite" from="0,328" to="0,360" dur="350ms" fill="freeze"/>
<rect x="0" y="0" width="640" height="32" fill="grey"/>
<rect onclick="$('video')[0].play()" x="0" y="0" width="64" height="32" fill="blue">
<set id="btn" attributeName="fill" to="red" begin="mousedown" end="mouseup;mouseout" dur="1s" fill="remove" />
</rect>
</g>
</svg>
</body>
</html>
此文档从哈希中获取视频 uri，并在 SVG UI 后面注入一个视频元素。由于它是一个 XHTML 文档（而不是 SVG），我现在可以使用 jquery 来处理鼠标事件，这并不理想，但它似乎可以工作。唯一的问题是我收到一个 JavaScript 错误：a.compareDocumentPosition is not a function 源文件：jquery.js 行：17 在 Firefox 中。
这种方法有意义吗？有没有更好的办法？我也更喜欢仅使用 SMIL 而不是 JavaScript/jQuery 的动画解决方案。
谢谢！
【问题讨论】：
标签： javascript xml animation svg smil