使用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

回答

相關問題