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 <set attributeName="value">: SVG に埋め込まれた HTML 要素であっても、HTML 要素の属性をアニメーション化するために SMIL を使用することはできません。(これは将来のクールな拡張機能になるでしょうが、その動作は定義されていない[1]ので、現時点では少し実験的です。)

つまりonbegin、Firefox はまだアニメーション イベントを発生させていません。これはまだ実装されていません。

[1] SVG 仕様では、どのSVG属性とプロパティがアニメート可能でどれがそうでないかを明示的に定義しています。(たとえば、 w3.org/TR/SVG11/text.html のすべての属性の下にある "Animatable: " フィールドを参照してください) 他の言語 (HTML など) の場合も、HTML の場合も定義していません(HTML にはアニメーションがないため)。コンポーネント) であるため、そもそもどの HTML 属性がアニメーション化可能かは不明です。

于 2010-04-30T07:03:49.980 に答える
0

textfield が表示されても、foreignObject 要素に width 属性と height 属性が欠けている場合、技術的にはブラウザは SVG 仕様に従っていません。

また、SVG のアニメーション要素は svg 要素で使用できますが、SVG 仕様では、それらが他の種類のマークアップに適用されるかどうか、またはどのように適用されるかは定義されていません。

アニメーション タイマーを使用する場合のオプションは、表示されないランダムな属性をアニメーション化する animate 要素など、短い繰り返しアニメーションを作成し、repeatEvent イベントをトリガーとして使用して、JavaScript 関数にコールバックすることです。 html 要素を変更します。

于 2010-04-30T07:04:05.500 に答える