使用SMIL动画SVG

我试图使用SVG为视频元素创建UI。我正在寻找一个简单的解决方案来控制控制栏的动画，当鼠标放在窗口的底部时，我想从窗口底部抬起（如YouTube）。使用SMIL动画SVG

这是我希望做什么：

<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”等。当鼠标在窗口中时，控制条动画就像我想要的那样不幸的是，屏幕会阻止它下面的所有元素获取他们自己的鼠标事件。

我正在寻找最简单的方法来完成此操作，因为我希望避免大量的JavaScript或库，所以最好使用标记（SMIL）。

谢谢！

>>>编辑< < <为了澄清这是我后：

我想创建一个自定义的SVG UI的HTML5视频<>元素。我的第一个方法是使用document.createElementNS动态地将SVG插入到DOM中，但这很麻烦。接下来我尝试了拉斐尔，但那只会让它稍微凌乱。我决定让用户界面成为一个独立的文档，所以我决定为用户界面创建一个SVG文档，然后创建一个对象>元素，它可以加载它并覆盖在顶部的视频元素上。我的问题是，我不能让控制栏进行动画制作，并且只要鼠标位于用户界面窗口内，就可以保持原位。此外，从母文档与UI进行通信正变得非常痛苦。

我目前的解决方案：

我把一个< video>元素我的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) 
    }) 
})

这会用<对象替换视频元素>谁的数据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 UI视频元素。由于它是一个XHTML文档（而不是SVG），我现在可以使用jquery来处理鼠标事件，这并不理想，但它似乎工作。唯一的问题是，我得到一个JavaScript错误：a.compareDocumentPosition不是函数源文件：jquery.js行：17在Firefox中。

这种方法有什么意义吗？有没有更好的办法？我也更喜欢使用SMIL而不是JavaScript/jQuery的动画解决方案。

谢谢！

来源

2011-08-24 Chris_F

使用SMIL动画SVG

回答

相关问题