SVG 动画从 wallclock-sync-value 开始 [英] SVG animation begin at wallclock-sync-value

问题描述

w3c 的 SVG 规范将 wallclock-sync-value 定义为begin"属性的可能值(http://www.w3.org/TR/SVG/animate.html#WallclockSyncValueSyntax).
换句话说:根据实际时钟时间启动动画，而不是基于与文档加载相关的时间.

SVG spec by w3c defines wallclock-sync-value as a possible value for "begin" attribute ( http://www.w3.org/TR/SVG/animate.html#WallclockSyncValueSyntax ).
In other words: start animation based on real clock time, not based on times relative to document loading.

我想在脚本被禁用的情况下创建一个 SVG 时钟.

I want to create a SVG clock in a situation, where scripting is disabled.

我没有找到挂钟用法的任何示例，但基于规范和 ISO8601 ( http://en.wikipedia.org/wiki/ISO_8601 ) 我做了以下例子:

I failed to find any examples of the wallclock usage, but based on the spec and ISO8601 ( http://en.wikipedia.org/wiki/ISO_8601 ) I made following excample:

<text 
  x="0" 
  y="15" 
  opacity="0" >

    <animate 
      attributeName="opacity" 
      attributeType="XML" 
      begin="wallclock(2000-01-01T00:00:00Z)" 
      dur="10s" 
      values="1; 1; 0; 0" 
      keyTimes="0; 0.07; 0.1; 1" 
      repeatCount="indefinite" />
  0
</text>

这应该是数字时钟中最右边的0"数字，并且应该每 10 秒闪烁一次.当我设置 begin="0s" 时它起作用.

That should be the rightmost "0" digit in a digital clock, and should flicr every 10 secconds. It works when I set begin="0s".

不幸的是，它没有按预期工作.例如，在 Firefox 开发者控制台中，它给出了一个 js 警告(！?！)意外值 wallclock(2000-01-01T00:00:00Z) 解析开始属性."

Unfortunately it does not work as expected. For example in Firefox developer console it gives a js warning(!?!) "Unexpected value wallclock(2000-01-01T00:00:00Z) parsing begin attribute."

wallclock-sync-value 是否在现代浏览器中实现，以及如何使用它?

Is wallclock-sync-value implemented in modern browsers, and how to use it?

推荐答案

Firefox 目前没有实现挂钟，将来也不会实现.

Firefox doesn't currently implement wallclock and won't be implementing it in the future either.

我们希望它在 SVG 2 中消失并被其他东西取代.我相信其他 UA 的开发人员也有类似的看法.

We expect it to disappear and be replaced by something else in SVG 2. I believe the developers of the other UAs are of a similar opinion.

这篇关于SVG 动画从 wallclock-sync-value 开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！