Question

截至目前，似乎firefox不支持在＆lt; animateTransform＆gt;的begin =属性中使用ISO8601日期时间字符串。标记（SVG spec）。例如：此文档应代表与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然后它会动画，但它与挂钟时间不同步。为了与挂钟时间同步，我认为我们必须计算相对于文档开始时间的开始值。

当我通过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

我最终做的是使用＆＃34; offset-value＆＃34;。 Mozilla Description of Offset-Value

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

我特别做的是当＆＃34;零＆＃34;是（也就是说，在window.onload或任何一段javascript中）。

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

var begin = (animation_start_time - page_load_time)/1000;

所以，就我而言，我的SVG是由第三方生成的（在我的情况下是对网络服务器的调用），并且在事情需要在屏幕上移动时并不提前知道。所以，我一直跟踪page_load_time，每当我了解到必须制作的新SVG时，我都会记录animation_start_time，并能够从中获取偏移值。

起初我真的很困惑，因为我认为＆＃34;偏移值＆＃34;有一个＆＃34;零＆＃34;动画创建时间（因此大多数事物的值为零）。对于我来说，页面加载时间为零（你大多数人都不知道它的价值）对我来说似乎非常奇怪。

为您提供代码问题的答案：

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

如果我正确理解你，你希望能够将开始时间设置为＆＃34;挂钟＆＃34;时间。但是因为start需要以毫秒为单位进行计算。所以我得到你希望它开始的时间毫秒，并减去当前时间。

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

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

2 个答案: