javascript - 是否可以从 javascript 访问 SMIL 计时器？

Question

我正在尝试使用 SMIL以动画方式将文本输入到嵌入在 SVG 中的字段中。我每晚在 Chrome 和支持 SMIL 的 Firefox 中尝试了以下代码，但没有效果:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:html="http://www.w3.org/1999/xhtml">
  <foreignObject>
    <html:input type="text" value="">
      <set attributeName="value" to="Hello World"
           begin="0" dur="10s" fill="freeze" />
    </html:input>
  </foreignObject>
</svg>

文本字段出现，但仍为空。所以，我想我会注册 beginEvent 并手动进行替换。为了测试事件，我添加了:

<rect id="rect" x="0" y="0" width="10" height="10">
  <animate id="dx" attributeName="x" attributeType="XML"
           onbegin="console.log('onbegin')"
           begin="0s" dur="1s" fill="freeze" from="0" to="-10" />
</rect>

以及从 event model 中有意义的 javascript :

window.addEventListener( 'load', function() {
  function listen( id ) {
    var elem = document.getElementById( id )
    elem.addEventListener( 'beginEvent', function() {
      console.log( 'begin ' + id )
    }, false )
    elem.addEventListener( 'endEvent', function() {
      console.log( 'end ' + id )
    }, false )
  }
  listen( 'rect' )
  listen( 'dx' )
})

但是在任一浏览器中，rect 或 animate 都没有触发任何事件。下一个合乎逻辑的步骤似乎是模拟动画(ala。FakeSmile)，但我想尽可能使用浏览器的动画计时器。

Answer 1

回复你的<set attributeName="value"> — 你不能使用 SMIL 来为 HTML 元素的属性设置动画，即使它们是嵌入在 SVG 中的 HTML 元素。 (这将是一个很酷的 future 扩展，但它的行为尚未定义[1]，所以在这一点上它会有点实验性。)

回复onbegin — 是的，Firefox 还没有触发动画事件 — 这还没有实现。

[1] SVG 规范明确定义了哪些 SVG 属性和属性是可动画的，哪些不是。 (参见例如 w3.org/TR/SVG11/text.html 上每个属性下方的“Animatable:”字段)它没有为其他语言(例如 HTML)定义，HTML 也没有定义(因为 HTML 没有动画组件) )，因此首先不清楚哪些 HTML 属性可以设置动画。