title: Animating SVG with SMIL
body: <p>I'm trying to greate a UI for a video element using SVG. I'm looking for a simple solution to animating the control bar, which I want to rise up from the bottom of the window when the mouse is inside of it (like YouTube).</p>
  
  <p>Here is what I would like to do:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1"&gt;
    &lt;g id="control_bar" transform="translate(0,360)"&gt;
      &lt;animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseover" from="0,360" to="0,328" dur="350ms" fill="freeze"/&gt;
      &lt;animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseout" from="0,328" to="0,360" dur="350ms" fill="freeze"/&gt;
      &lt;rect x="0" y="0" width="640" height="32" fill="grey"/&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Unfortunately, window.mouseover doesn't do anything. Instead I created a transparent rectangle to cover the entire window, and gave it an id="screen" and used begin="screen.mouseover" etc. Sure enough the control bar animates like I want it to when the mouse is in the window, unfortunately though, screen prevents all the elements below it from getting their own mouse events.</p>
  
  <p>I'm looking for the simplest possible way to accomplish this, preferable with just markup (SMIL) since I'd like to avoid a ton of JavaScript or libraries.</p>
  
  <p>Thanks!</p>
  
  <p><strong>>>>EDIT&lt;&lt;&lt;</strong> To clarify what it is I'm after:</p>
  
  <p>I wanted to create a custom SVG UI for the HTML5 &lt;video> element. My first approach was to dynamically insert SVG into the DOM using document.createElementNS, but that got messy really fast. Next I tried Raphael, but that only made it slightly less messy. I decided I wanted the UI to be a self contained document, so I decided to create a SVG document for the UI and then create a &lt;object> element which would load it and be overlaid on top the &lt;video> element. My problem with that was that I couldn't get the control bar to animate and then stay in position for as long was the mouse was within the window of the UI. Also, communicating with the UI from the parent document was becoming a pain.</p>
  
  <p>My current solution:</p>
  
  <p>I place a &lt;video> element in my HTML document like so:</p>
  
  <pre><code>&lt;video width="640" src="myvideo.webm"/&gt;
  </code></pre>
  
  <p>then I use the following JavaScipt (with jquery):</p>
  
  <pre><code>$(function(){
    $("video").each(function(){
      var old_video = $(this);
      var width = old_video.attr("width")
      var height = Math.floor(width / (16 / 9))
      var video = $("&lt;object/&gt;")
      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)
    })
  })
  </code></pre>
  
  <p>This replaces the video element with a &lt;object> who's data uri is set to: video.xhtml#myvideo.webm</p>
  
  <p>Then the contents of video.xhtml are so:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
    &lt;script src="jquery.js"/&gt;
    &lt;script&gt;
      $(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)
      })
    &lt;/script&gt;
    &lt;style&gt;
      svg {
        position: absolute;
        top: 0;   left: 0;
      }
      video {
        position: absolute;
        top: 0;   left: 0;
        width: 100%;
        height: 100%;
        background: black;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="video"/&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1"&gt;
      &lt;g id="bar" transform="translate(0,360)"&gt;
        &lt;animateTransform id="in" attributeName="transform" attributeType="XML" type="translate" begin="indefinite" from="0,360" to="0,328" dur="50ms" fill="freeze"/&gt;
        &lt;animateTransform id="out" attributeName="transform" attributeType="XML" type="translate" begin="indefinite" from="0,328" to="0,360" dur="350ms" fill="freeze"/&gt;
        &lt;rect x="0" y="0" width="640" height="32" fill="grey"/&gt;
        &lt;rect onclick="$('video')[0].play()" x="0" y="0" width="64" height="32" fill="blue"&gt;
          &lt;set id="btn" attributeName="fill" to="red" begin="mousedown" end="mouseup;mouseout" dur="1s" fill="remove" /&gt;
        &lt;/rect&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This document fetches the video uri from the hash and injects a video element behind the SVG UI. Since it's a XHTML document (and not SVG) I am now able to use jquery to handle the mouse events, which isn't ideal but it seems to work. Only problem with it is that I get a JavaScript error: <strong>a.compareDocumentPosition is not a function
  Source File: jquery.js Line: 17</strong> in Firefox.</p>
  
  <p>Does this approach make any sense? Is there a better way? I'd also prefer a solution to the animation using SMIL only and not JavaScript/jQuery.</p>
  
  <p>Thanks!</p>