Можно ли получить доступ к таймеру SMIL из JavaScript? - PullRequest
Новая
       20

Можно ли получить доступ к таймеру SMIL из JavaScript?

2 голосов
/ 30 апреля 2010

Я пытаюсь использовать SMIL для анимации ввода текста в поле, встроенное в SVG. Я пробовал следующий код как в Chrome, так и в Firefox с поддержкой SMIL, но он не дал никакого эффекта: 

<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 ), но я хочу использовать таймер анимации браузера, если это возможно.

Ответы [ 2 ]

2 голосов
/ 30 апреля 2010

RE your <set attributeName="value"> - вы не можете использовать SMIL для анимации атрибутов элементов HTML, даже если они являются элементами HTML, встроенными в SVG. (Это было бы классным расширением в будущем, но его поведение не определено [1], поэтому на данном этапе оно будет немного экспериментальным.)

RE the onbegin - да, Firefox еще не запускает анимационные события - это еще не реализовано.

[1] Спецификация SVG явно определяет, какие атрибуты и свойства SVG являются анимируемыми, а какие - нет. (см., например, поле «Animatable:» под каждым атрибутом в w3.org / TR / SVG11 / text.html ). не определяет это для других языков (например, HTML), как и HTML (поскольку в HTML нет компонента анимации), поэтому неясно, какие атрибуты HTML будут в первую очередь анимируемыми.

0 голосов
/ 30 апреля 2010

Если текстовое поле появляется, но элемент foreignObject не имеет атрибута width и height, технически браузер, который не соответствует спецификации SVG, поскольку эти атрибуты необходимы для того, чтобы ForeignObject был виден внутри SVG.

Также элементы анимации в SVG могут использоваться в элементах svg, но спецификация SVG не определяет, применимы ли они к другим типам разметки или как они применяются.

Опция, если вы хотите использовать таймер анимации, может состоять в том, чтобы создать короткую повторяющуюся анимацию, например, элемент анимации, который анимирует некоторый случайный атрибут, который не отображается, и использовать события repeatEvent в качестве триггера, обращаясь к функция javascript, которая изменяет элемент (ы) html.

...