Question

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

我正在寻找最简单的方法来实现这一点，最好只使用标记（SMIL），因为我想避免使用大量的JavaScript或库。

谢谢！

＆gt;＆gt;＆gt;编辑＆lt;＆lt;＆lt; 为了澄清我的目标：

我想为HTML5＆lt; video＆gt;创建自定义SVG用户界面。元件。我的第一种方法是使用document.createElementNS动态地将SVG插入到DOM中，但这很快就会变得混乱。接下来我尝试了拉斐尔，但这只是让它稍微不那么凌乱。我决定我想要UI是一个自包含的文档，所以我决定为UI创建一个SVG文档，然后创建一个＆lt; object＆gt;将加载它并叠加在＆lt; video＆gt;顶部的元素元件。我的问题是我无法让控制栏动画，然后只要鼠标在UI的窗口内保持原位。此外，从父文档与UI进行通信变得很麻烦。

我目前的解决方案：

我发了一个＆lt; video＆gt;我的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)
  })
})

这会将视频元素替换为＆lt; object＆gt;谁的数据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 Line：17 在Firefox中。

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

谢谢！

Answer 1

begin属性中的“window”部分只是一个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中运行良好。

Answer 2

您是否尝试过为<svg>元素本身提供id属性？ e.g。

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

使用SMIL动画SVG

2 个答案: