如何获取 HTML/SVG 文档的开始动画时间？

Question

截至目前，firefox 似乎不支持在 标签 (SVG spec) 的 begin= 属性中使用 ISO8601 日期时间字符串。例如：这个文档应该代表与 UTC 同步的秒针，但在 Firefox 中它根本没有动画。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
   height="400"
   version="1.1">

  <g
     id="layer1">
    <circle cx="200" cy="200" r="180" style="fill:#ccf"/>
    <path
       style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
       d="M 200,200 200,30">
      <animateTransform
      attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 200,200"
                          to="360 200,200"
                          dur="60s"
                          begin="1970-01-01T00:00:00Z"
                          repeatCount="indefinite"
      />
      </path>
  </g>
</svg>

如果我们将 begin= 更改为 0，它会进行动画处理，但不会与挂钟时间同步。为了与挂钟时间同步，我认为我们必须计算 begin 相对于文档开始时间的值。

当我通过 AJAX 获取数据时，随着时间的推移，我将向文档添加动画元素，因此计算 begin 属性的代码必须在文档生命周期中的任何时候工作。如果我们将这个脚本标签添加到动画中，它应该让问题的本质更清楚一点：

<script type="text/javascript">
function computeAnimationBegin()
{
    // This is a toy function to illustrate the problem
    var d1= new Date()
    //console.log(d1.getTime())
    d1.setSeconds(0)
    d1.setMilliseconds(0)
    return d1.getTime()
}

function wallclockToDocumentTime(t1)
{
   //  what magic goes here??
}

function adjustAnimation()
{
    var elt = document.getElementById("a")

    var t1 = computeAnimationBegin()
    var val = wallclockToDocumentTime(t1)
    console.log(val)
    elt.setAttribute("begin", val)
}

window.onload = function() {
    setInterval(adjustAnimation, 5*1000)
}
</script>

在 javascript 中，如何将挂钟时间映射到适合在 begin 属性中使用的值？

Answer 1

我最终做的是使用“偏移值”。 Mozilla Description of Offset-Value

基本上，它允许您指定动画在相对于页面加载时的特定秒数开始。

我具体做的是在“零”为“零”时（即在 window.onload 或任何 javascript 中）有一个变量存储。

然后，对于我想要添加页面的每个动画，我会跟踪第二个变量，它是我希望动画开始的挂钟时间。然后，我会将 svg 的开头设置为：

var begin = (animation_start_time - page_load_time)/1000;

因此，在我的例子中，我的 SVG 是由第三方生成的（在我的例子中是调用网络服务器），并且不知道什么时候需要在屏幕上显示和移动。所以，我记录了 page_load_time，每次我了解到我必须制作一个新的 SVG 时，我都会记录 animation_start_time，并能够从中得出偏移值。

一开始我真的很困惑，因为我认为“偏移值”的动画创建时间是“零”（因此大多数东西的值都是零）。页面加载时间为零（您通常甚至不知道其值）对我来说似乎非常奇怪。

给你代码问题的答案：

function wallclockToDocumentTime(t1)
{
   return (t1 - page_load_time)/1000 + "s"; //s added so it fits directly into svg
}

哦，如果您担心 window.onload 发生在某些事情之后（它可能会在奇怪的情况下发生），您可以通过以下方式设置 page_load_time：

<script type="text/javascript">
    // put this at the top so no other javascript can delay it
    page_load_time = Date.now();
</script>

在任何其他 javascript（甚至是引用或库）之前。

Answer 2

如果我对您的理解正确，您希望能够将开始时间设置为“挂钟”时间。但是因为 begin 预计以毫秒为单位，所以您需要计算它。所以我会得到你希望它开始的毫秒数并减去当前时间。

var beginMS = new Date("yyyy-mm-dd hh:mm:ss").getTime() - new Date().getTime();