用SMIL动画化SVG
我正在尝试使用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=“屏幕”，并使用了begin="screen.mouseover“等。果然，当鼠标在窗口中时，控制栏会像我希望的那样动画，不幸的是，屏幕阻止了它下面的所有元素获得自己的鼠标事件。
我正在寻找一种最简单的方法来完成这一任务，最好只使用标记(SMIL)，因为我希望避免大量的JavaScript或库。
谢谢!
>>>EDIT<<<澄清我想要的是什么：
我想为HTML5元素创建一个自定义SVG。我的第一种方法是使用document.createElementNS动态地将SVG插入到DOM中，但是很快就变得很混乱。接下来，我试了一下拉斐尔，但这只会使它稍微变得不那么凌乱。我决定我希望UI是一个独立的文档，所以我决定为UI创建一个SVG文档，然后创建一个元素来加载它并覆盖在元素之上。我的问题是，我无法让控制条动画，然后停留在位置，因为鼠标是在窗口内的UI。另外，从父文档与UI进行通信变得很痛苦。
我目前的解决方案：
我在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)
})
})这将将视频元素替换为who的数据uri设置为: video.xhtml#myvideo.webm
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后面注入一个视频元素。由于它是一个XHTML文档(而不是SVG)，所以我现在能够使用jquery来处理鼠标事件，这并不理想，但它似乎有效。唯一的问题是我得到了一个JavaScript错误：a.compareDocumentPosition不是函数源文件: jquery.js Line: 17。
这种方法有意义吗？有更好的办法吗？与动画相比，我更喜欢只使用SMIL而不是JavaScript/jQuery的解决方案。
谢谢!
回答 2
Stack Overflow用户
发布于 2011-08-24 13:01:43
开始属性中的“窗口”部分只是一个id。svg所做的是在具有该id的元素上注册一个事件侦听器，它甚至不必在svg中，它可以是同一个文档中的一个HTML元素。下面是一个例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="window">hover here</div>
<svg xmlns="http://www.w3.org/2000/svg" height="640" width="480" 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>
</body>
</html>在Chrome、Firefox和Opera中，似乎工作得很好。
Stack Overflow用户
发布于 2011-08-24 12:50:00
您是否尝试过给<svg>元素本身一个id属性？例如：
<svg xmlns="http://www.w3.org/2000/svg" id="screen" 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="screen.mouseover" from="0,360" to="0,328" dur="350ms" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" begin="screen.mouseout" from="0,328" to="0,360" dur="350ms" fill="freeze"/>
<rect x="0" y="0" width="640" height="32" fill="grey"/>
</g>
</svg>https://stackoverflow.com/questions/7173311
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号