2

我正在尝试使用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>

以及从事件模型中有意义的 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），但如果可能的话，我想使用浏览器的动画计时器。

4

2 回答 2

2

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

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

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

于 2010-04-30T07:03:49.980 回答
0

如果出现文本字段但 foreignObject 元素缺少宽度和高度属性，从技术上讲，这样做的浏览器不遵循 SVG 规范，因为这些属性是 foreignObject 在 SVG 内可见所必需的。

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

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

于 2010-04-30T07:04:05.500 回答