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

RE <set attributeName="value"> - 您无法使用SMIL为HTML元素的属性设置动画，即使它们是SVG中嵌入的HTML元素。（这将是一个很酷的未来扩展，但它的行为没有定义[1]，所以在这一点上它将有点实验性。）

RE onbegin - 是的，Firefox还没有触发动画事件 - 这还没有实现。

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

Answer 2

如果出现文本字段，但foreignObject元素缺少宽度和高度属性，从技术上讲，执行该操作的浏览器不遵循SVG规范，因为externalObject在SVG内部是可见的。

SVG中的动画元素也可用于svg元素，但SVG规范并未定义它们是否/如何应用于其他类型的标记。

如果要使用动画计时器，则选项可能是创建一个短的重复动画，例如动画元素，动画一些不可见的随机属性，并使用repeatEvent事件作为触发器，回调一个修改html元素的javascript函数。

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

2 个答案: